d3代碼如何從v3更新到v4？

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使用了默認投影，即美國Albers投影：

d3.geo.path（）

使用默認設置創建新的地理路徑生成器：albersUsa投影和4.5像素的點半徑。 （ 鏈接 ）

在d3v4中，默認投影為空投影：

path.projection（[projection]）<>

如果指定了投影，則將當前投影設置為指定的投影。 如果未指定投影，則返回當前投影，默認為null。 （ 鏈接 ）

這就是為什么您的數據會在d3v3地圖中適當縮放和居中的原因，盡管它不在其他任何地方。

geoPath的d3v4默認投影僅將數據中的坐標轉換為svg坐標，而無需進行轉換或投影。 因此，在d3v4中，您的數據需要正確渲染投影（已繪制，但是由於美國的所有x坐標均為負，因此不在屏幕上）。 要使用v3中的默認投影（美國Albers復合投影），您可以使用：

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

然后按原樣進行其他所有操作：

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

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