Question

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

我想让这个地图响应容器/窗口大小。但是，我见过的例子是使用topojson和SVG来缩放地图。 http://techslides.com/demos/d3/d3-worldmap-boilerplate.html

Geojson无法以类似的方式更新地图大小吗？

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替换为在调整窗口大小后重新绘制的新<{1>} 。在重绘时，唯一改变的是您用作svg元素尺寸的宽度和高度。

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

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

示例in this blog及其javascript。

dc.js响应geojson美国地图

1 个答案: