Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

d3.js foreach loop on all the paths contained in a svg

I have a svg generated by d3.js like this one:

<svg height="1094" width="1254">
    <g id="countries" stroke-width="1px" transform="">
        <path d="M100,519.150,200,250" fill="rgba(100,100,100,0.8)"
        stroke="rgba(200,200,200,0.5)" id="id1" class="1"></path>
        <path d="M100,519.150,200,250" fill="rgba(100,100,100,0.8)"
        stroke="rgba(200,200,200,0.5)" id="id2" class="1"></path>
        <path d="M100,519.150,200,250" fill="rgba(100,100,100,0.8)"
        stroke="rgba(200,200,200,0.5)" id="id3" class="3"></path>
        <path d="M100,519.150,200,250" fill="rgba(100,100,100,0.8)"
        stroke="rgba(200,200,200,0.5)" id="id4" class="1"></path>
    </g>
</svg>

I want to do somtehing like that :

foreach(path in #countries){
    if(this.class === 3){dostuff}
}

I've tried the jquery way :

$('#countries').find('path').each(function( index ) {
    console.log(this);
});

... log nothing

I've tried the d3.js way (countries was initialized as follow : countries = svg.append('svg:g').attr('id', 'countries') ):

countries.select('path').each(console.log(this));
countries.selectAll('path').each(console.log(this));

log the window object (wtf?)

like image 511
fabien Avatar asked Nov 30 '22 22:11

fabien


1 Answers

The method selection.each requires a function as argument:

countries.selectAll('path').each(function(d,i) { console.log(this); });
like image 168
nautat Avatar answered Dec 06 '22 02:12

nautat