使用 .each 遍历路径 D3

Question

我正在尝试在 D3 中制作我的第一张地图。地图显示正常，但我现在想遍历附加到 SVG 的每条路径。这是我正在处理的代码：

 var path = d3.geo.path()
                  .projection(projection);
 //Create SVG element
 var svg = d3.select("body")
             .append("svg")
             .attr("width", w)
             .attr("height", h);


 //Load in GeoJSON data
 d3.json("/data/friesland.json", function (json) {

     //Bind data and create one path per GeoJSON feature
        svg.selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path)
        .attr('fill', 'rgba(29,91,85,1)')
        .attr('stroke', 'white')
        .attr('stroke-width', 1);

 });

 svg.selectAll('path').each(function (d, i) { console.log('test'); });

似乎没有绑定到 svg 的路径，我该如何更改它？谢谢！

Answer 1

d3.json 执行 asychronously (see docs)。尝试在传递给 d3.json 的函数中 selecting <path>s，像这样：

d3.json("/data/friesland.json", function (json) {

 //Bind data and create one path per GeoJSON feature
 svg.selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr('fill', 'rgba(29,91,85,1)')
    .attr('stroke', 'white')
    .attr('stroke-width', 1);


 svg.selectAll('path').each(function (d, i) { console.log('test'); });

});

现在您只会在填充 SVG 后 select <path> 秒。

Answer 2

正如 mdml 所建议的那样，您想将 selectAll 放在 json 加载的回调中 - 否则它会在绑定发生之前发生。

var path = d3.geo.path()
              .projection(projection);
var svg = d3.select("body")
         .append("svg")
         .attr("width", w)
         .attr("height", h);


d3.json("/data/friesland.json", function (json) {

    svg.selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr('fill', 'rgba(29,91,85,1)')
    .attr('stroke', 'white')
    .attr('stroke-width', 1);
   svg.selectAll('path').each(function (d, i) { console.log('test'); });
 });

使用 .each 遍历路径 D3

Loop through paths D3 with .each

javascript

d3.js