d3.js 替代axis.tickSubdivide？答案

【问题标题】：d3.js alternative to axis.tickSubdivide?d3.js 替代axis.tickSubdivide？
【发布时间】：2014-02-08 08:28:40
【问题描述】：

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

有 axis.tickSubdivide() 函数来绘制 subtick，但我认为它已被弃用。(https://github.com/mbostock/d3/commit/bd0ce6cab8a2b0d2aaffc7ce21a873fc514eb8ed)

并且axis.tickSubdivide() 不再在API(https://github.com/mbostock/d3/wiki/API-Reference) 上。

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

有什么方法可以在我的处置轴上绘制 subtick 吗？

我找到了一个使用 axis.tickSubdivide() 的示例 (http://bl.ocks.org/GerHobbelt/3605124)，但即使嵌入的 d3.v3.min.js 显示“n.tickSubdivide=function()”，我也无法弄清楚它是如何工作的{return arguments.length&&n}"，它什么都不做，只返回轴。

【问题讨论】：

标签： d3.js

【解决方案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。

【讨论】：

【解决方案2】：

绘制两个轴的替代方法是首先绘制所有刻度，然后重新选择它们并根据它们的数据或索引值调整它们的样式。

这里有例子和更多解释：
https://stackoverflow.com/a/21583985/3128209

这种方法有几个好处：

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

但是，您不能轻易做到的一件事是在绘图区域上同时拥有一个带有刻度线的轴和一个网格，就像在 Lars 的示例代码中一样。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

扩展了 AmeliaBR 的答案以满足我的要求。选择了我只想要刻度线而不是刻度线和值的值，添加了“隐藏”类。但这可以用于主题的任何变化。

            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;
                       } );

【讨论】：