D3 styling SVG elements when defined

Question

I have a D3 chart with an axis that I want to style via the original calls to create it. However it only seems to work on the first call. I'll show you what I mean:

When I create the axis via

svg.select('g.y.axis').call(yaxis)
    .selectAll("path")
        .attr("fill","none")
      .attr("stroke", "#000")
    .selectAll("line")
        .attr("fill","none")
      .attr("stroke", "#000");

Only the path is styled correctly. You can check out my jsfiddle to see what I mean. I know this may be slower than just having CSS styles but I need it to be styled in the original call for what I'm working on. Thanks in advance!

Answer 1

It's because d3.selectAll("foo").selectAll("bar") will try to find <bar> s that are inner elements to founded <foo> s. And in your case svg finds no <line> s in <path> s.

Just call separately:

svg.selectAll("path")...
svg.selectAll("line")...

UPD To find path/line in .y.axis:

svg.select(".y.axis").selectAll("path")

or

svg.selectAll(".y.axis path")