D3 - 路径输出 0px x 0px - 地图不会显示 - 不确定如何为此使用投影

Question

我正在尝试在 D3 中制作一张世界地图。我从这个 link 收到了 JSON 文件：https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json

下面是我的代码。

  // Define SVG size
  var width = 800;
  var height = 500;

  // Define SVG attributes
  var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

  d3.json("/map.json", function(error, map) {
    if (error) return console.error(error);

    console.log(map);

    svg.append("g")
    .data(map.features)
    .enter().append('path')
    .attr("class", function (d) {
      return d.properties.name;
    })
    .attr('d', d3.geo.path().projection(d3.geo.mercator()));

  });

当我运行它在我的本地主机上时，下面是每个国家/地区显示的内容，所以我知道它正在正确读取 json 文件：

路径class="Angola" d="M522.7427503528568, -- 等等

我试过使用不同的投影来显示地图，但我一直没弄明白。每个国家/地区的路径显示 0px x 0px。

非常感谢任何帮助！ :)

Answer 1

两件事：

1.) 为了绑定数据你需要 selector:

svg.append("g")
    .selectAll(".country") // <- selector
    .data(map.features)
    .enter().append('path')
    .attr("class", "country") // <- giving all paths the same class
    .attr('d', d3.geo.path().projection(d3.geo.mercator()));

2.) 你需要加点风格：

.country {
    fill: none;
    stroke: black;
}

您还应注意，在您 link 的数据中有 something wrong with bermuda。

工作example。

D3 - 路径输出 0px x 0px - 地图不会显示 - 不确定如何为此使用投影

D3 - path outputs 0px by 0px - map won't show up - not sure how to use projection for this

javascript

json

d3.js