javascript 创建没有编号的 d3.js 轴

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11691525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 14:01:34  来源:igfitidea点击:

create d3.js axes without numbering

javascriptsvgd3.jscustomization

提问by Apollo

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.

有没有办法在没有任何编号的情况下创建 d3.js 轴?刻度线还可以,但根本没有数字。目前我正在使用下面的代码创建我的 d3.js 轴。提前致谢。

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

回答by mbostock

The simplest way to hide tick labels is via CSS:

隐藏刻度标签的最简单方法是通过 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:

当然,我更喜欢 CSS,因为它是最具声明性的。这里的例子: