Question

Is it possible to create a d3.js axis and have there be no tick marks and no numbering scheme? Basically, can I make the axis invisible? I’m using the code below to create my axes:

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)
      .orient("left"))
    .append("text")
    .style("color", "white") 
      .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

If you don’t want your axis to be visible, just don’t draw them (basically comment out this code).

If you really just want to turn them white, you can use the following classes:

.axis line, .axis text, .axis path {
   color: white;
}

This would be the easiest way to manipulate them to turn them ‘on’ and ‘off’. Also, if you ever need to figure out how to style a d3 diagram, you can navigate through the SVG just like you do html and style with CSS the same way too.

For example, here is the SVG for the tick marks in the axis.

<line class="tick" y2="6" x2="0"></line>

You can see that I targeted the element (line) but you could also target (.tick) as well.