javascript - D3.js - JSON 数据数组将相同的数组元素绑定(bind)到所有内容

Question

我正在加载一个包含对象数组的 GeoJSON 数据文件，每个对象都包含不同国家轮廓的矢量信息。相同的数组元素被绑定(bind)到每个 DOM 元素。我之前在 JavaScript 中遇到过这个范围问题，但我所做的每一次更改都没有导致任何加载。

我附上了 jsfiddle .我使用了一个示例数据文件，它似乎需要几秒钟才能加载。

我在 jsfiddle 中的代码如下所示:

$(document).ready(function() {
  d3.json(
    "https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/master/countries.geojson",
    function(error, data) {
      var myGeoJSON = data.features;

      for (i = 0; i < myGeoJSON.length; i++) {
        var path = d3.geo.path();
        var width = 960;
        var height = 600;
        var svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height);

        svg.selectAll("path")
          .data(data.features)
          .enter().append("path")
          .attr("d",path)
          .attr("fill","#3e429a");
      }
    }
  );
});

Answer 1

您不需要遍历特征数组。您的数据文件是一个 FeatureCollection，D3 can draw ，作为单个路径元素:

svg.append("path").datum(data).attr("d", d3.geo.path());

或作为单独的路径元素，每个要素(国家/地区)一个:

svg.selectAll("path").data(data.features)
  .enter().append("path").attr("d", d3.geo.path())

默认情况下 D3 使用投影 d3.geo.albersUsa()它将夏威夷带到墨西哥，将阿拉斯加带到热带之外。您可以切换到 equirectangular projection看整个世界:

d3.json(
  "https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/6cf0946a0f4d027d21686e8402f19b524c4f6385/countries.geojson",
  function(error, data) {
    var projection = d3.geo.equirectangular();
    var path = d3.geo.path().projection(projection);
    var width = 960;
    var height = 600;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    svg.selectAll("path")
      .data(data.features)
      .enter().append("path")
      .attr("d", path)
      .attr("fill", "#3e429a");
  }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

---

结语:我最初尝试使用更常见的 Mercator projection , 才发现 it cannot handle Antarctica . D3 绘制大陆的形状，然后填充其余的海洋。

在同一个 D3 论坛帖子中，D3 的作者 mentioned a bug in the TopoJSON tool用于生成 map ，所以这可能是您使用的数据文件的问题。如果您更喜欢 Mercator，您可能需要与 geo-boundaries-world-110m 的维护者合作修复数据文件，或者只是从您的 map 中排除南极洲。

墨卡托的南极洲演示:

d3.json(
  "https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/6cf0946a0f4d027d21686e8402f19b524c4f6385/countries.geojson",
  function(error, data) {
    var projection = d3.geo.mercator();
    var path = d3.geo.path().projection(projection);
    var width = 960;
    var height = 600;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    var antarctica = data.features.splice(6, 1);
    // now "data" has the rest of the world
    svg.selectAll("path")
      .data(antarctica)
      .enter().append("path")
      .attr("d", path)
      .attr("stroke", "red").attr("stroke-width", 10)
      // thick borders so we can see the odd paths
      .attr("fill", "#3e429a");
  }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>