setting css of axis in d3.js

Question

Is there away to do .axis path { fill : none } in d3.js?

I've tried .attr and .style on .call(d3.svg.axis() but to no avail. I just be doing something wrong here...

The full code which I'm using to create my axes is below:

 // create Axis
  svg.selectAll("axis")
      .data(d3.range(angle.domain()[1]))
    .enter().append("g")
      .attr("class", "axis")
      .attr("transform", function(d) { return "rotate(" + angle(d) * 180 / Math.PI + ")"; })
    .call(d3.svg.axis()
      .scale(radius.copy().range([0,0]))
      .ticks(1)
      .tickFormat("")
      .orient("left"))
      .attr("fill","none") // EDITED WITH FILL NONE
    .append("text") 
      .attr("y", 
        function (d) {
          if (window.innerWidth < 455){
            console.log("innerWidth less than 455: ",window.innerWidth);
            return -(0);
          }
          else{
            console.log("innerWidth greater than 455: ",window.innerWidth);
            return -(0);
          }
        })
      .attr("dy", "0em");

Answer 1

When I want to apply CSS settings to d3 elements, I find that it is easiest to assign them an ID or class (which you do above), and then apply the desired attributes using CSS. For example, keep the JS as above, and then in css do:

.axis path {

    fill:           none;
}

If you want to do it in the JS, you should use:

.style('fill', 'none')

However, you should apply it to the svg which contains the axis, not inside the .call(d3.svg.axis()). Hope this helps.