如何在dc.leaflet.js中显示标记的值(sum)而不是计数
我想使用crossfilter的reduceSum函数dc.leaflet.js，并显示总和而不是聚类标记的数量。
第一个example for 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>回答 2
Stack Overflow用户
发布于 2020-03-23 22:10:23
我重写了这个问题，因为它非常不清楚。我同意@Kees的观点，即其意图可能是在聚类标记图中显示总和，而不是"reduceSum不起作用“。
@Kees还指出了一个Leaflet.markercluster issue，它提供了关于如何在标记簇中显示和的基本信息。
问题变成了，如何将这些定制应用于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源代码中复制了implementation of _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来将它与其他类区分开来；在new fiddle中，我用
.marker-cluster-indiv {
background-color: #9ecae1;
}
.marker-cluster-indiv div {
background-color: #6baed6;
}
这种交互可能不太清楚，因为单击蓝点会弹出一个弹出窗口，而不是展开。也许应该使用不同的图标。
Stack Overflow用户
发布于 2014-12-16 05:57:13
reduceSum部分应该工作得很好，因为这只是一个不同的交叉过滤器函数。
您确定您的数据被正确读取了吗？您声明它是一个tsv文件，并显示看起来像是用制表符分隔的代码，但随后您使用d3.csv加载它，考虑到第二个字段中间有一个逗号，这将产生非常糟糕的效果。
请在加载数据后尝试使用console.log(data)，并验证加载是否正确。
此外，您也没有说明您遇到了什么问题。“它不工作”并不能帮助我们帮助你。
https://stackoverflow.com/questions/27486893
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号