Dc.js Merkzettel Popup zeigt Felder aus Eingabedaten

Question

Ich bin ein dc.js Anfänger arbeitet an einem Dashboard mit Informationen zu Diagrammen und einer Karte.

Ich kann derzeit keine Informationen über das Marker-Einblendfenster neben dem Standard anzeigen, das die Koordinaten (Geo) eines Punkts und die Anzahl der Vorkommen zu sein scheint. Aktuelle Code ist:

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

Ich habe versucht, das Popup wie folgt zu ändern:

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

Um den Namen des Ortes und die Anzahl der Elemente dort enthalten. In den Pop-ups wird jetzt nur noch "undefined: undefined" erwähnt.

Ich bin sicher, dass es eine einfache Lösung gibt, die ich aufgrund meiner begrenzten Erfahrung einfach ignoriere. Kann jemand helfen?

Answer 1

Das Herz von dc.js und crossfilter ist eine Art Map und Reduce, wo für jeden Wert Bins gefunden werden, und dann werden die Zeilen, die in jedem Bin landen, aggregiert.

Aber es klingt wie Sie versuchen, Ihre Daten in der Broschüre Karte ohne Aggregation direkt anzuzeigen. Wenn Sie aggregieren möchten, müssen Sie entscheiden, wie Sie aggregieren items (Sie haben Ihre Daten nicht gezeigt, so dass ich nicht weiß, was es ist), und wahrscheinlich müssen Sie die name verlassen, weil Namen in der Regel nicht Aggregat.

Also würde ich vorschlagen, Crossfilter zu bin nach Namen (vorausgesetzt, das ist einzigartig) statt Ort, und halten Sie dann auf den Standort und die Elemente, sowie eine Zählung. Leider ist dies etwas aneinander vorbei zu crossfilter Kern Zweck, so ist der Code ein wenig umständlich:

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

Wir stehen noch unter der Annahme, dass die Namen eindeutig sind und die Felder aus dem ersten Datensatz greifen wir sehen. Jetzt wird die crossfilter Gruppe eine Reihe von Schlüssel-Wert-Paare zurückgeben, wobei Name der key sein wird und die {count, items, geo} wird der Wert sein, so können wir dc-Faltblatt sagen, wie diese zu lesen:

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 ist ein Konvention möchte ich mich daran erinnern, dass die Daten d fast immer ein Schlüssel-Wert-Paar sein wird. (In einigen DC-Diagrammen wird es ein Objekt sein, das ein data Mitglied enthält, welches das Schlüssel/Wert-Paar ist.)

Beachten Sie, dass sich dies vom Standardverhalten der dc-Broschüre unterscheidet, um nach Standort zu aggregieren und den Wert Ort als Schlüssel. Wenn Ihre Standorte garantiert einzigartig sind, könnten Sie dies auch tun, aber es scheint mir riskant (Daten könnten verloren gehen). Ich denke, es ist besser, einen wirklich eindeutigen Schlüssel zu verwenden, wenn Sie die Originaldaten ohne Aggregation anzeigen möchten.

Answer 2

Das MerkblattMarkerChart funktionierte in meinem Fall nicht. Es zeigte keine Fehler oder Popups. Mit demselben Ansatz der Standardfunktion dc-leaflet.js können Sie Folgendes tun:

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 + "$"; 
     });