Dc.js传单标记弹出窗口，显示输入数据中的字段

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

包括位置名称和项目数量。然而，弹出窗口现在只提到"undefined:undefined"。

我确信有一个简单的解决方案，由于我的经验有限，我只是忽略了它。有人能帮忙吗？

Answer 1

dc.js和crossfilter的核心是映射和减少，为每个值找到bin，然后聚合每个bin中的行。

但这听起来像是你试图在传单地图上直接显示你的数据，而不进行任何聚合。如果你确实想聚合，你必须决定如何聚合items(你还没有显示你的数据，所以我不知道它是什么)，并且可能必须去掉name，因为名称通常不会聚合。

因此，我建议告诉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};
}
);

我们只是假设名称是唯一的，并从我们看到的第一条记录中获取字段。现在，交叉过滤器组将返回一个键值对数组，其中name将是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几乎总是一个键值对。(在某些dc图表中，它将是一个包含data成员的对象，该成员是键值对。)

请注意，这不同于dc传单的默认行为，即按位置聚合，并将位置设置为关键字。如果你的位置保证是唯一的，你也可以这样做，但对我来说这似乎有风险(数据可能会丢失)。我认为，如果您想在不聚合的情况下显示原始数据，最好使用真正唯一的密钥。

Answer 2

leafletMarkerChart在我的情况下不起作用。它既没有显示错误，也没有弹出窗口。在标准的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 + "$";
});