2

我想使用 crossfilter 的 reduceSum 函数 dc.leaflet.js，并显示总和而不是聚集标记的数量。

dc.leaflet.js的第一个示例使用 reduceCount。此外，它不使用减少的值；它只显示集群中标记的数量。

我想使用reduceSum来使用数据的总和。

这是我作为 tsv 的数据：

type geo say
wind 38.45330,28.55529 10
wind 38.45330,28.55529 10
solar 39.45330,28.55529 10

这是我的代码：

<script type="text/javascript" src="../js/d3.js"></script>
<script type="text/javascript" src="../js/crossfilter.js"></script>
<script type="text/javascript" src="../js/dc.js"></script>
<script type="text/javascript" src="../js/leaflet.js"></script>
<script type="text/javascript" src="../js/leaflet.markercluster.js"></script>
<script type="text/javascript" src="../js/dc.leaflet.js"></script>


<script type="text/javascript">
    /*     Markers      */

d3.csv("demo1.csv", function(data) {
  drawMarkerSelect(data);
});

function drawMarkerSelect(data) {
  var xf = crossfilter(data);

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

  dc.leafletMarkerChart("#demo1 .map")
      .dimension(facilities)
      .group(facilitiesGroup)
      .width(1100)
        .height(600)
      .center([39,36])
      .zoom(6)
      .cluster(true);  

    var types = xf.dimension(function(d) { return d.type; });
    var typesGroup = types.group().reduceSum(function(d){return d.say});    


  dc.pieChart("#demo1 .pie")
      .dimension(types)
      .group(typesGroup)
      .width(200) 
        .height(200)
        .renderLabel(true)
        .renderTitle(true)
      .ordering(function (p) {
        return -p.value;
      });

    dc.renderAll();
} 



</script>
4

2 回答 2

2

我已经重写了这个问题，因为它非常不清楚。我同意@Kees 的观点，其目的可能是在聚集标记图表中显示总和，而不是“reduceSum 不起作用”。

@Kees 还指出了一个Leaflet.markercluster 问题，它提供了有关如何在标记簇内显示总和的基本信息。

问题变成了，如何将这些自定义应用到 dc.leaflet.js？

首先，我用另一列创建了示例数据的一个版本rnd：

type    geo rnd
wind    43.45330,28.55529   1.97191
wind    43.44930,28.54611   3.9155
wind    43.45740,28.54814   3.9922
...

我们可以reduceSum这样使用：

  var facilitiesGroup = facilities.group().reduceSum(d => +d.rnd);

并通过覆盖来使用其值注释每个标记.marker()，包装默认回调：

  const old_marker_function = marker.marker();
  marker.marker(function(d, map) {
    const m = old_marker_function(d, map);
            m.value = d.value;
    return m;
  });

我们可以使用以下方式指定图标的不同呈现方式.clusterOptions()：

  marker.clusterOptions({
    iconCreateFunction: function(cluster) {
      var children = cluster.getAllChildMarkers();
        var sum = 0;
        for (var i = 0; i < children.length; i++) {
        sum += children[i].value;
      }
      sum = sum.toFixed(0);
      var c = ' marker-cluster-';
      if (sum < 10) {
        c += 'small';
      } else if (sum < 100) {
        c += 'medium';
      } else {
        c += 'large';
      }
      return new L.DivIcon({ html: '<div><span>' + sum + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
    }
  });

上述问题中给出的示例缺少任何样式，因此我从 Leaflet.markercluster 源中复制了实现_defaultIconCreateFunction，并对其进行了修改。

数簇 演示小提琴

正如预期的那样，数字接近原始数字的 2.5 倍（因为新列是从 0 到 5 的随机数）。

将数字放在各个标记上

marker.icon()允许您更改单个标记的图标，因此您可以使用DivIcon类似的样式来显示数字：

  marker.icon(function(d, map) {
    return new L.DivIcon({
      html: '<div><span>' + d.value.toFixed(0) + '</span></div>',
      className: 'marker-cluster-indiv marker-cluster',
      iconSize: new L.Point(40, 40) });
  });

这引入了一个新类.marker-cluster-indiv以将其与其他类区分开来；在新的小提琴中，我将它们染成蓝色

.marker-cluster-indiv {
    background-color: #9ecae1;
}
.marker-cluster-indiv div {
    background-color: #6baed6;
}

与蓝色个体

交互可能不太清楚，因为单击蓝点会弹出一个弹出窗口而不是展开。也许应该使用不同的图标。

于 2020-03-23T14:10:23.197 回答
0

该reduceSum部分应该可以正常工作，因为这只是一个不同的交叉过滤器功能。

你确定你的数据被正确读取了吗？您声明它是一个tsv文件，并显示看起来像是制表符分隔的代码，但随后您使用d3.csv它来加载它，考虑到第二个字段的中间有一个逗号，这会产生非常糟糕的效果。

请在加载数据后尝试console.log(data)，并验证它是否正确加载。

另外，你没有说明你遇到了什么问题。“它不起作用”并不能帮助我们帮助您。

于 2014-12-15T21:57:12.737 回答