javascript - 向 D3 Globe 添加新路径

Question

我正在开发 D3 Globe 的实现。我试图在用户单击按钮时添加到地球的路径，但事实证明这并不成功。如果我一次添加所有路径，则没有问题，但如果我尝试在触发事件后添加它们，则会失败。我的jsfiddle:http://jsfiddle.net/Guill84/b6xvj76e/1/ 。我认为 JSON 没有问题，因为它会按预期在控制台中弹出。

脚本失败的部分可以在 fiddle 的底部找到。为了方便引用，我将其粘贴在下面:

$("#clickMe").click(function() {
  data = {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "properties": {
        "name": "path1"
      },
      "year": "2010",
      "geometry": {
        "type": "Polygon",
        "coordinates": "[[[116.4551,40.2539],[117.5977,44.3408],[116.4551,40.2539]]]"
      },
      "id": "RML"
    },
    {
      "type": "Feature",
      "properties": {
        "name": "path2"
      },
      "year": "2010",
      "geometry": {
        "type": "Polygon",
        "coordinates": "[[[116.4551,40.2539],[122.3438,41.0889],[116.4551,40.2539]]]"
      },
      "id": "RML"
    },
    {
      "type": "Feature",
      "properties": {
        "name": "path3"
      },
      "year": "2010",
      "geometry": {
        "type": "Polygon",
        "coordinates": "[[[116.4551,40.2539],[105.9961,37.3096],[116.4551,40.2539]]]"
      },
      "id": "RML"
    },
    {
      "type": "Feature",
      "properties": {
        "name": "path4"
      },
      "year": "2010",
      "geometry": {
        "type": "Polygon",
        "coordinates": "[[[116.4551,40.2539],[109.5996,35.6396],[116.4551,40.2539]]]"
      },
      "id": "RML"
    }]}



  console.log(data);
  var svg = d3.select("#body");


  flows = svg.selectAll("path")
    .data(data)
    .enter().append("svg:path")
    .attr("d", clip)
    .style("stroke", "black")
    .attr("id", function(d) {
      return d.properties.name.split(' ').join('_')
    });


});

Answer 1

问题有三个:

1) 您的 JSON 结构有问题:数组以字符串格式指定，因此在 clip 函数使用时会导致错误。

2) 您正在直接绑定(bind) data 对象，而您应该绑定(bind) data.features (它是包含您需要创建的四个路径的数组)。

3) 该选择将选择国家/地区的现有路径。您可以通过向新路径添加类来避免这种情况。例如，将它们归类为流。

4) 流路径是在其渲染函数的范围内声明的，因此它们无法在刷新函数上更新。

这是包含三个修复的代码:

$("#clickMe").click(function () {
    // 1) Arrays: Fixed arrays for coordinates so they are not serialized in a string
    var data = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {
                    "name": "path1"
                },
                "year": "2010",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[[116.4551, 40.2539], [117.5977, 44.3408], [116.4551, 40.2539]]]
                },
                "id": "RML"
            },
            {
                "type": "Feature",
                "properties": {
                    "name": "path2"
                },
                "year": "2010",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[[116.4551, 40.2539], [122.3438, 41.0889], [116.4551, 40.2539]]]
                },
                "id": "RML"
            },
            {
                "type": "Feature",
                "properties": {
                    "name": "path3"
                },
                "year": "2010",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[[116.4551, 40.2539], [105.9961, 37.3096], [116.4551, 40.2539]]]
                },
                "id": "RML"
            },
            {
                "type": "Feature",
                "properties": {
                    "name": "path4"
                },
                "year": "2010",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[[116.4551, 40.2539], [109.5996, 35.6396], [116.4551, 40.2539]]]
                },
                "id": "RML"
            }
        ]
    };

    console.log(data);

    var svg = d3.select("#body");

    // 3) Selection: Add a class to avoid collision with existing paths
    // 4) Using var declared outside so it can be used on the update function
    flows = svg.selectAll("path.flow")
        // 2) Data binding: Bind the features property instead, which is an array
        .data(data.features);

    // 3) Enter nodes: When appending them, class them as flow so they keep separated
    flows.enter().append("svg:path")
        .classed("flow", true)
        .attr("d", clip)
        .style("stroke", "black")
        .style("stroke-width", "1px")
        .attr("id", function (d) {
            return d.properties.name.split(' ').join('_')
        });
});

现在它可以工作了，但我仍然看不到地球上添加的路径。不过， path 元素肯定会附加到 svg 元素的 DOM 中，这解决了您最初的问题;)

- 更新-

正如评论中所指出的，添加的路径不遵循地球的运动。这是因为路径被添加到 svg 中，但未在 refresh() 函数上沿着国家/地区形状进行更新(添加了第 4 点)。

为此，这些路径的选择应在 refresh() 函数内可用(只需在脚本顶部声明 var flows 即可) ，然后在该函数内添加对此选择的更新。像这样:

function refresh(duration) {
  (duration ? feature.transition().duration(duration) : feature).attr("d", clip);
  // 4) Added the flows to the paths selection whose d attribute will be updated (only when present)
  flows && (duration ? flows.transition().duration(duration) : flows).attr("d", clip);
}

完整版本可以在这个 fiddle 上看到:http://jsfiddle.net/oscar_dr/0psy5udk/2/