Leaflet 如何在dc.plicate.js中显示标记的值（总和）而不是计数

我想使用crossfilter的reduceSum函数dc.ployate.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>

/*标记*/
d3.csv（“demo1.csv”），函数（数据）{
绘图标记选择（数据）；
});
函数drawMarkerSelect（数据）{
var xf=交叉过滤器（数据）；
var facilities=xf.dimension（函数（d）{return d.geo；}）；
var facilitiesGroup=facilities.group（）.reduceSum（函数（d）{return d.say}）；
dc.传单Markerchart（“演示1.地图”）
.规模（设施）
.小组（设施小组）
.宽度（1100）
.高度（600）
.中心（[39,36]）
.zoom（6）
.集群（真）；
var types=xf.dimension（函数（d）{return d.type；}）；
var typesGroup=types.group（）.reduceSum（函数（d）{return d.say}）；
dc.pieChart（“演示1.pie”）
.尺寸（类型）
.组（类型组）
.宽度（200）
.身高（200）
.renderLabel（真）
.rendertile（真）
.排序（函数（p）{
返回-p.值；
});
dc.renderAll（）；
} 
reduceSum
部分应该可以正常工作，因为这只是一个不同的交叉过滤函数

您确定您的数据读取正确吗？你声明它是一个<强> TSV < /St>文件，并且显示看起来像是Tab分隔的代码，但是你使用<代码> d3.cv来加载它，考虑到第二个字段中间有逗号，这会有很坏的效果。

加载数据后，请尝试
console.log（data）
，并验证其加载是否正确

此外，您没有说明遇到了什么问题。“它不起作用”对我们没有帮助。
我重写了这个问题，因为它非常不清楚。我同意@Kees的观点，其目的可能是在聚集标记图中显示总和，而不是“reduceSum不起作用”

@Kees还指出了一个例子，它提供了如何在标记簇内显示和的基本信息

问题变成了，如何将这些定制应用到dc.ployate.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 cluster indiv
，以区别于其他类；我用蓝色把它们涂成蓝色

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


交互可能不太清晰，因为单击蓝点会弹出一个弹出窗口，而不是展开。也许应该使用不同的图标。
Gordon已经确定了数据中最重要的问题是制表符分隔的值，但是上面示例中的
d3.csv（）
正在寻找逗号分隔的值。旁注：你有没有检查过这些值是数字还是字符串？我也有同样的问题。coder1的意思是，对于标记的值，leallet只查看地理数据点，而不是提供给该点的值。在上面的示例中，如果缩小2（两个不同的数据点），您将在标记中看到。但您需要的是它接受列“say”的值。在上面的示例30中。但这在reduceSum中是不可能的。希望你能帮助我们！您希望如何处理该值？有气泡图，这是你要找的吗？在这种情况下，我仍然看不到reduceCount和reduceSum之间的区别-标记不能以任何方式显示值。嗨，Gordon，您发送的链接中的第一个示例是基于地理位置的气泡图标记中的值，而不是特定列中的值。在这个链接中，同样的问题也被问到了，但我真的不知道如何在上面的例子中实现这一点。我明白了，你说的是标记簇，只是你想在图标中显示一个数字，而不是标记的计数。您想要群集功能吗？顺便说一句，这个问题已经超过5年了，写得不是很好；在未来，可能最好问一个新问题（尽管如果有时间，我很乐意在这里回答）。非常感谢戈登，非常感谢。是的，我仍然想要集群，但是正如你提到的，基于列的值。我正在尝试为您制作一个JSFIDLE，这样更改代码可能更容易。再次感谢Gordon，非常好的工作，速度也很快。确定图标的额外功能也非常好。我正试图找到一个解决方案的限制，你已经提到，但希望你有一些空闲时间找到解决这个问题的办法。真的很感谢你花在这上面的时间和它的外观！好的，加上蓝色的个人。希望这能清楚地说明如何在需要时进行更多的定制。
  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 {
    background-color: #9ecae1;
}
.marker-cluster-indiv div {
    background-color: #6baed6;
}