입력 데이터의 필드를 보여주는 Dc.j 전단지 마커 팝업

Question

저는 차트와지도에 대한 정보를 표시하는 대시 보드에서 일하는 dc.js 초심자입니다.

현재 마커 팝업 창에 대한 정보를 표시 할 수 없습니다. 기본값은 지점 좌표 (위치) 및 발생 횟수 인 것처럼 보입니다. 현재 코드는 다음과 같이 나는 팝업을 변경 시도

var facilities = xf.dimension(function(d) { return d.geo; }); 
var facilitiesGroup = facilities.group().reduceCount(); 

dc.leafletMarkerChart("#test .map",groupname) 
    .dimension(facilities) 
    .group(facilitiesGroup) 
    .width(540) 
    .height(440) 
    .center([0,0]) 
    .zoom(7) 
    .cluster(true) 
    .filterByArea(true) 
    .renderPopup(true) 
    .popup(); 

:

.popup(function(d,feature) { return feature.name +" : "+feature.items; }); 

는 위치의 이름과이 항목의 수를 포함하려면. 그러나 팝업에는 이제 "정의되지 않음 : 정의되지 않음"만 언급됩니다.

제한된 경험으로 인해 무시할 수있는 쉬운 해결책이 있다고 확신합니다. 누구든지 도와 줄 수 있습니까?

Answer 1

dc.js와 crossfilter의 핵심은 map과 reduce의 일종으로 각 값에 대해 bin이 발견되고 각 bin에있는 행이 집계됩니다.

그러나 집계없이 데이터를 리플릿 맵에 직접 표시하려고하는 것 같습니다. 집계하려면 items을 집계하는 방법 (데이터를 표시하지 않아 데이터가 무엇인지 알 수 없으므로)을 결정하고 name을 떠나야합니다. 이름이 일반적으로 필요하지 않기 때문입니다 골재.

그래서 crossfilter에 위치 대신 이름으로 (고유하다고 가정하여) bin을 말한 다음 위치 및 항목을 유지하고 개수를 유지하는 것이 좋습니다. 불행하게도이 crossfilter의 핵심 목적에 간 목적에서 다소이기 때문에 코드는 조금 어색 : 우리는 단지 이름이 고유한지 가정 및 우리가 보는 첫 번째 레코드의 필드를 잡는 것

var facilities = xf.dimension(function(d) { return d.name; }); 
var facilitiesGroup = facilities.group().reduce(
    function(p, v) { // add 
     p.items = v.items; 
     p.geo = v.geo; 
     ++p.count; 
     return p; 
    }, 
    function(p, v) { // remove 
     --p.count; 
     return p; 
    }, 
    function() { // init 
     return {count: 0}; 
    } 
); 

. 이제 crossfilter 그룹 이름이 key되고 {count, items, geo}이 값이됩니다 키 - 값 쌍의 배열을 반환합니다, 그래서 우리는 어떻게 이러한 읽는 DC-전단지 알 수 있습니다 :

dc.leafletMarkerChart("#test .map",groupname) 
    // ... 
    .valueAccessor(function(kv) { 
     return kv.value.count; 
    }) 
    .locationAccessor(function(kv) { 
     return kv.value.geo; 
    }) 
    .popup(function(kv) { 
     return kv.key + " : " + kv.value.items; 
    }) 

kv가있다 컨벤션 나는 데이터 d이 거의 항상 키 - 값 쌍이 될 것이라는 것을 상기시키기 위해 사용하는 것을 좋아합니다. 일부 직류 차트에서는 키 - 값 쌍인 data 구성원을 포함하는 개체가됩니다.

이것은 dc-leaflet 기본 동작과 다른 위치 별 집계 및 위치를 키로 사용합니다. 위치가 고유 한 것으로 보장된다면, 그렇게 할 수도 있지만 위험한 것으로 보입니다 (데이터가 손실 될 수 있음). 집계없이 원본 데이터를 표시하려는 경우 정말 고유 키를 사용하는 것이 좋습니다.

Answer 2

내 경우에는 전단지 마커 차트가 작동하지 않았습니다. 오류나 팝업을 보여주지 않았습니다. 표준 dc-leaflet.js 함수에서 동일한 접근법을 사용하면 다음을 수행 할 수 있습니다.

var restaurantsGroup = restaurantNames.group().reduce(
        function(p, v) { // add 
        p.name = v.name; 
        p.price_range = v.price_range; 
        p.stars = v.stars; 
        p.latitude = v.latitude; 
        p.longitude = v.longitude; 
      ++p.count; 
      return p; 
       }, 
       function(p, v) { // remove 
       --p.count; 
       return p; 
       }, 
       function() { // init 
       return {count: 0}; 
       } 
      ); 


var marker = dc_leaflet.markerChart("#demo1 .map", groupname) //map formatting 
     .dimension(restaurantNames) 
     .group(restaurantsGroup) 
     .width(700) 
     .height(500) 
     .center([43.733372, -79.354782]) 
     .zoom(11) 
     .cluster(true) 
    .valueAccessor(function(kv) { 
      return kv.value.count; 
    }) 
    .locationAccessor(function(kv) { 
      return [kv.value.latitude,kv.value.longitude] ; 
    }) 
    .popup(function(kv,marker) { 
      return kv.value.name + " - " + kv.value.stars + " * - " + 
      kv.value.price_range + "$"; 
     });