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

【问题标题】：Building DC Dashboard with BubbleChart Overlay on Map - Better Example?在地图上使用 BubbleChart 叠加构建 DC 仪表板 - 更好的示例？
【发布时间】：2015-11-18 01:47:54
【问题描述】：

我正在处理类似于this example 的可视化，由 dc.js 库示例主页链接到。该页面有一些不错的示例启动代码可供参考，但是我有一个关于在地图上绘制气泡图的特殊问题。

在上面的示例中，作者似乎手动分配了显示加拿大省份形状的路径。然后代码将bubbleOverlay 图表分配给名为caChart 的变量，该变量将包含在加拿大地图上特定坐标处绘制的气泡。但是，在代码的更下方，代码似乎在网页上为要绘制的每个气泡手动分配 (x, y) 坐标，而不是以编程方式分配它们的位置（参见 cmets）：

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);

我想在一张类似的美国地图上绘制经纬度坐标的时间戳数据。数据大致如下：

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

有没有办法将这些坐标读入交叉过滤器维度，并以编程方式将这些坐标绘制在类似的底层地图图像上，而无需手动分配它们？此处的任何帮助（包括指向工作示例的指针）将不胜感激。

【问题讨论】：

是的，气泡叠加图特别欠发达。您是否有想要使用的地图图像，如果有，您能算出投影吗？如果没有，链接的传单图表会起作用吗？
@Gordon：传单图表可以工作。美国的基本图像是从这个 D3 示例 (bost.ocks.org/mike/bubble-map) 中借用的，我相信是使用 Albers 美国投影进行投影的。我正在考虑的另一个选项是使用 D3 构建美国图表，并为该图表提供交叉过滤器维度和组。但是，我不确定如何去做。感谢阅读。
因此，如果您直接使用该地图，则 specifies 的投影为 d3.geo.albersUsa().scale(1280).translate([width / 2, height / 2]) - 让某些东西起作用的最快方法是将其应用于您的点。如果气泡叠加图支持投影会很好，但我想它也可以与非地图一起使用，所以也许这就是原因。
至于传单解决方案，我启动了一个 PR 以从 dc.leaflet.js 的一个分支中提取一些气泡图代码。但我还没有测试过。 github.com/dc-js/dc.leaflet.js/pull/13

标签： javascript d3.js dc.js crossfilter

【解决方案1】：

你可以完全绕过气泡覆盖，直接使用

mapChart
.on("renderlet", drawSomething)

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

【讨论】：