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（请参阅docs）。尝试在传递给<path>的函数中选择d3.json，如下所示：

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后选择<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

2 个答案: