Question

var url = 'https://gist.githubusercontent.com/
d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb5
6e36/us-states.json';

d3.json(url, function (error, data) {
    var path = d3.geo.path();
    svg.selectAll('path')
        .data(data.features)
        .enter()
        .append('path')
        .attr('d', path);
});

我正在努力让我的代码尽可能保持最新，以便我可以开始使用d3v4，但许多教科书已经过时了。

上面的示例适用于d3v3（如此处所示：http://bl.ocks.org/d3byex/378d68f27a1cc144aa8a）

我知道.geo.path（）需要更新为.geoPath（），但我至少缺少一个需要进行的其他更新，以使其符合d3v4。

Answer 1

在d3v3中，d3.geo.path使用默认投影，美国阿尔伯斯投影：

d3.geo.path（）

使用默认设置创建新的地理路径生成器：   albersUsa投影和4.5像素的点半径。（link）

在d3v4中，默认投影为空投影：

path.projection（[projection]）＆lt;＆gt;

如果指定了投影，则将当前投影设置为   指定的投影。如果未指定projection，则返回   当前投影，默认为null。（link）

这就是为什么你的数据在你的d3v3地图中被适当缩放和居中的原因，尽管它不在其他任何地方。

geoPath的d3v4默认投影只是将数据中的坐标转换为svg坐标，而不进行变换或投影。因此，在d3v4中，您的数据需要正确渲染投影（它被绘制，但由于美国的所有x坐标都是负数，因此它不在屏幕上）。要使用v3的默认投影（美国Albers复合投影），您可以使用：

var projection = d3.geoAlbersUsa();
var path = d3.geoPath().projection(projection);

然后像你一样去做其他事情：

＆＃13;

        var width = 950, height = 500;
        var svg = d3.select('body')
            .append('svg')
            .attr("width",width)
            .attr("height",height);

        var url = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us-states.json';
        d3.json(url, function (error, data) {
            
            var projection = d3.geoAlbersUsa()
            var path = d3.geoPath().projection(projection);
            
            svg.selectAll('path')
                .data(data.features)
                .enter()
                .append('path')
                .attr('d', path);
        });

＆＃13;

    <script src="http://d3js.org/d3.v4.min.js"></script>

＆＃13;

这个d3代码如何从v3更新到v4？

1 个答案:

d3.geo.path（）

path.projection（[projection]）＆lt;＆gt;