javascript - Dc.js 传单标记弹出窗口显示来自输入数据的字段

Question

我是一名 dc.js 新手，致力于在图表和 map 上显示信息的仪表板。

我目前无法在标记弹出窗口上显示信息，除了默认的，这似乎是一个点的坐标(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 的核心是一种 map 和 reduce，其中为每个值找到 bin，然后聚合落在每个 bin 中的行。

但听起来您正试图在没有任何聚合的情况下直接在传单 map 中显示您的数据。如果你确实想要聚合，你必须决定如何聚合 items(你没有显示你的数据所以我不知道它是什么)，并且可能不得不离开name 因为名称通常不会聚合。

所以我建议告诉 crossfilter 按名称(假设它是唯一的)而不是位置进行分类，然后保留位置和项目，并保持计数。不幸的是，这与 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 组将返回一个键值对数组，其中 name 将是 key 而 {count, items, geo} 将是值，所以我们可以告诉 dc-leaflet 如何阅读这些:

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-leaflet 默认行为不同，按位置聚合，并将位置设置为键。如果保证您的位置是唯一的，您也可以这样做，但对我来说这似乎有风险(数据可能会丢失)。如果你想显示原始数据而不聚合，我认为最好使用真正唯一的键。