Dc.js маркер рекламного проспекта, отображающий поля из входных данных

Question

Я новичок dc.js, работающий на приборной панели, отображающий информацию о диаграммах и карте.

В настоящее время я не могу отображать информацию о всплывающем окне маркера, кроме значения по умолчанию, которое, как представляется, является координатами точки (geo) и количеством вхождений. Текущий код:

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; }); 

Чтобы включить имя местоположения и количества пунктов там. Однако всплывающие окна теперь просто упоминают «undefined: undefined».

Я уверен, что есть простое решение, которое я просто игнорирую из-за моего ограниченного опыта. Может ли кто-нибудь помочь?

Answer 1

Сердце dc.js и crossfilter - это своего рода карта и сокращение, где для каждого значения найдены бины, а затем объединяются строки, которые приземляются в каждом бункере.

Но похоже, что вы пытаетесь напрямую отображать свои данные на карте листовки без какой-либо агрегации. Если вы хотите объединить данные, вам нужно будет решить, как заполнить items (вы не указали свои данные, чтобы я не знал, что это такое), и, вероятно, вам придется оставить name, потому что имена обычно не агрегат.

Таким образом, я предлагаю передать перекрестный фильтр в 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.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-листа, для агрегирования по местоположению и для установки местоположение в качестве ключа. Если ваши местоположения гарантированно будут уникальными, вы также можете сделать это таким образом, но мне кажется рискованным (данные могут потеряться). Я думаю, что лучше использовать действительно уникальный ключ, если вы хотите отобразить исходные данные без агрегации.

Answer 2

Рекламная листовкаMarkerChart не работает в моем случае. Он не обнаружил ошибок и всплывающих окон. Используя тот же подход к стандартной функции dc-sheetlet.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 + "$"; 
     });