Question

我想在D3中的轴上绘制小数。但在最新的D3中似乎是不可能的。

有了axis.tickSubdivide（）函数来绘制小子，但我认为不推荐使用。（https://github.com/mbostock/d3/commit/bd0ce6cab8a2b0d2aaffc7ce21a873fc514eb8ed）

而且axis.tickSubdivide（）不再出现在API（https://github.com/mbostock/d3/wiki/API-Reference）上。

我尝试使用axis.innerTickSize，但它没有用。

有没有办法在轴上绘制单词？

我找到了一个使用axis.tickSubdivide（）的示例（http://bl.ocks.org/GerHobbelt/3605124），但我无法弄清楚它是如何工作的，即使嵌入式d3.v3.min.js说“n.tickSubdivide = function （）{return arguments.length＆amp;＆amp; n}“，它不做任何事情只返回轴。

Answer 1

这样做的新方法是拥有多个轴，一个用于主要刻度线，另一个用于次要刻度轴。您可以选择也显示在次要轴上的刻度线并删除它们：

svg.append("g")
  .attr("class", "grid")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.svg.axis().scale(x).ticks(20).tickSize(-height))
  .selectAll(".tick")
  .data(x.ticks(10), function(d) { return d; })
  .exit()
  .classed("minor", true);

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.svg.axis().scale(x).ticks(10));

完整示例here。

Answer 2

绘制两个轴的另一种方法是最初绘制所有刻度线，然后重新选择它们并根据它们的数据或索引值调整它们的样式。

示例和更多解释：
https://stackoverflow.com/a/21583985/3128209

这种方法有一些好处：

你可以制作多个级别的刻度样式，而不仅仅是主要/次要，而不会给代码增加额外的复杂性
您的DOM最终更干净，只有一个轴组和一组刻度标签

但是，你不能轻易做到的一件事就是在绘图区域内同时使用带刻度线和的轴，如Lars的示例代码。

Answer 3

我通过删除所有其他刻度文本来解决这个问题：

d3.selectAll('g.x.axis .tick text').each(function(d,i){
    if(i%2==1){
      d3.select(this).remove()
    }
  })

Answer 4

扩大了AmeliaBR的答案，以满足我的要求。选择了我想要的刻度标记代替刻度和值，添加＆＃34;隐藏＆＃34;类。但是这可以用于主题的任何变化。

            var gy = humiditySVG.append( "g" )
                .attr( "class", "y axis" )
                .attr( "transform", "translate(" + 154 + "," + 0 + ")" )
                .call( yAxis );

            humiditySVG.selectAll( "text" )
                .attr( "class", function ( d ) {
                                           if ( $.inArray(d, [0,50,100])==-1  ) {
                               return "subtick";
                           }
                           return;
                       } );
            humiditySVG.selectAll( "line" )
                .attr( "x2", function ( d ) {
                           if ( $.inArray(d, [0,50,100])==-1  ) {
                               return 1;
                           } else {
                               return 3;
                           }
                           return;
                       } );

d3.js替代axis.tickSubdivide？

4 个答案: