我想使用交叉过滤器的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>
我已经重写了这个问题,因为它还不清楚。我同意@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的随机数)。
限制是,当群集完全扩展时,普通标记不会显示任何数字。我非常确定Demo fiddle调用也可以自定义以显示.marker()
,但我现在已经没有时间了。
d.value
部分应该可以正常工作,因为那只是一个不同的交叉滤波器功能。
您确定您的数据已正确读取?您声明它是一个tsv文件,并显示看起来像是用制表符分隔的代码,但是随后您使用了reduceSum
来加载它,考虑到中间有逗号,这将带来非常糟糕的影响第二个字段。
加载数据后,请尝试d3.csv
,并验证其是否正确加载。
而且,您也没有陈述遇到的问题。 “无效”对我们没有帮助。