elegantly accessing the nth element of a selection

[jerome cukier]

Is there a simple way of doing that?


for instance I can do ...selectAll(" ... ").filter(function(d,i)
{return i==n;})
but is there a cleaner way of doing it?

[Chris Viau]

I use the nth-child pseudo class CSS selector, something like this:

d3.select("...:nth-child(n)")

[Kyle Foreman]

So I do this all the time for accessing the n-th option within a form select:

d3.select('#dropdown')[0][0][n]

But it doesn't work for selecting elements within an svg. Not sure if that's due to differences in how svg dom is structured or what.

[jerome cukier]

ok Chris you win an extra question.
is there a way to set up styles of a pseudo-class? for instance hover.
AFAIK doing d3.selectAll("element:hover").style(...) doesn't work.
not that I need to do this currently but I once tried this and
couldn't do it without writing out the css outside of the code.


On 16 nov, 17:07, Chris Viau <christophev...@gmail.com> wrote:
> I use the nth-child<http://reference.sitepoint.com/css/pseudoclass-nthchild> pseudo

[Chris Viau]

Works for me on SVG:

element.selectAll(".bar:hover")

    .style("fill", "red");

or

element.selectAll(".bar:hover")

    .each(function(){return d3.select(this).style("fill", "red");});

Can you post a non-working example on jsfiddle?

[Chris Viau]

But you are right, it's only working on the special case where you select something with D3 with your cursor already on the element...