在地图上使用BubbleChart Overlay构建DC仪表板 - 更好的示例？

Question

我正在开发类似于此示例的可视化,由dc.js库示例主页链接.该页面有一些不错的示例初学者代码,但是我有一个关于在地图上绘制气泡图的特殊问题.

在上面的示例中,作者似乎手动指定显示加拿大省形状的路径.然后代码将bubbleOverlay图表分配给一个名为的变量caChart,该变量将包含在加拿大地图上的特定坐标处绘制的气泡.但是,在代码中进一步向下看,代码会在网页上为每个要绘制的气泡手动分配(x,y)坐标,而不是以编程方式分配其位置(请参阅注释):

caChart.width(600)
            .height(450)
            .dimension(cities)
            .group(totalCrimeRateByCity)
            .radiusValueAccessor(function(p) {
                return p.value.avgTotalCrimeRate;
            })
            .r(d3.scale.linear().domain([0, 200000]))
            .colors(["#ff7373","#ff4040","#ff0000","#bf3030","#a60000"])
            .colorDomain([13, 30])
            .colorAccessor(function(p) {
                return p.value.violentCrimeRatio;
            })
            .title(function(d) {
                return "City: " + d.key
                        + "\nTotal crime per 100k population: " + numberFormat(d.value.avgTotalCrimeRate)
                        + "\nViolent crime per 100k population: " + numberFormat(d.value.avgViolentCrimeRate)
                        + "\nViolent/Total crime ratio: " + numberFormat(d.value.violentCrimeRatio) + "%";
            })
            // These points appear to be assigned manually
            .point("Toronto", 364, 400)
            .point("Ottawa", 395.5, 383)
            .point("Vancouver", 40.5, 316)
            .point("Montreal", 417, 370)
            .point("Edmonton", 120, 299)
            .point("Saskatoon", 163, 322)
            .point("Winnipeg", 229, 345)
            .point("Calgary", 119, 329)
            .point("Quebec", 431, 351)
            .point("Halifax", 496, 367)
            .point("St. John's", 553, 323)
            .point("Yukon", 44, 176)
            .point("Northwest Territories", 125, 195)
            .point("Nunavut", 273, 188);

我在lat-long坐标上有时间戳数据,我想在美国的类似地图上绘制.数据大致类似于:

device_id, timestamp, lat, lon
1, 2014-7-21, 40.7127837, -74.00594130000002
2, 2014-7-22, 40.8516701, -93.2599318

有没有办法将这些坐标读入交叉滤波器维度,并以编程方式在相似的基础地图图像上绘制这些坐标,而无需手动分配它们？这里的任何帮助(包括指向工作示例的指针)将不胜感激.

Answer 1

您可以完全绕过气泡覆盖层，只需使用

mapChart
.on("renderlet", drawSomething)

在drawSomething方法中，您可以以编程方式绘制气泡，就像我在这里概述的那样：https ://stackoverflow.com/a/35476690/2795423