Question

我正在处理类似于this example的可视化，由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

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

1 个答案: