Проходные пути D3 с .each

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> S внутри функции вы передаете 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'); }); 

}); 

Теперь вы будете только выбрать <path> сек после того, как SVG была заселена.

Answer 2

Как было предложено mdml, вы хотите поместить ваш selectAll внутри обратного вызова на ваш json-load - иначе это произойдет до того, как произойдет привязка.

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'); }); 
});