简体   繁体   中英

create d3.js axes without numbering

Is there a way to create a d3.js axis without any kind of numbering? Tickmarks are ok but just no numbers at all. Currently I'm creating my d3.js axis with the code below. Thanks in advance.

 // 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)
      .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");

The simplest way to hide tick labels is via CSS:

.axis text { display: none; }

Alternatively, you could use the empty string as the tick format:

axis.tickFormat("");

Or, you could use post-selection to remove the text elements after creating the axis:

selection.call(axis).selectAll("text").remove();

Of course, I prefer CSS as it's the most declarative. Example here:

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM