javascript - dc.js 响应式 geojson 美国 map

Question

使用以下示例代码进行测试: http://dc-js.github.io/dc.js/vc/

我想让这张 map 响应容器/窗口的大小。 然而，我见过的例子利用了 topojson 和 SVG 来缩放 map 。 http://techslides.com/demos/d3/d3-worldmap-boilerplate.html

Geojson 不可能以类似的方式更新 map 大小吗？

d3.json("../geo/us-states.json", function (statesJson) {
        usChart.width(990)
                .height(500)
                .dimension(states)
                .group(stateRaisedSum)
                .colors(d3.scale.quantize().range(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"]))
                .colorDomain([0, 200])
                .colorCalculator(function (d) { return d ? usChart.colors()(d) : '#ccc'; })
                .overlayGeoJson(statesJson.features, "state", function (d) {
                    return d.properties.name;
                })
                .title(function (d) {
                    return "State: " + d.key + "\nTotal Amount Raised: " + numberFormat(d.value ? d.value : 0) + "M";
                });

Answer 1

您可以采用与链接到的方法 (techSlides) 完全相同的方法。

它包括将整个 svg 替换为在调整窗口大小后重新绘制的新的 svg。重绘时，唯一改变的是用作 svg 元素尺寸的宽度和高度。

您的数据是否是 GeoJson 或 TopoJson 并不影响这一点。

此技术的一个更平滑的变体是在调整窗口大小时调整现有 svg 元素的大小，而不进行重绘。只需添加 SVG viewBox 和 preserveAspectRatio="xMinYMin"，即可保留 SVG 内的投影。

示例 in this blog ，及其 javascript .