轴上的自定义刻度大小（d3js）答案

【问题标题】：Custom tick size on axis (d3js)轴上的自定义刻度大小（d3js）
【发布时间】：2014-03-02 05:24:31
【问题描述】：

我正在 d3.js 中创建一个 svg x-y-chart。是否可以根据 tickValue 创建不同长度的刻度？

我已经创建了自己的 tickFormat 函数 myTickFormat 并在 .tickFormat([format]) 中使用它，因为 [format] 应该是一个函数，所以效果很好。但是不可能对.innerTickSize([size]) 做同样的事情，它需要一个数字。

例如如果我希望值 70 的刻度更长，我想做这样的事情：

var myTickSize = function(d) {
    if (d === 70) { return 20;}
    return 6;
};

但是当我使用myTickSize 作为.innerTickSize() 的参数时：

var yScale = d3.scale.linear();
var yAxis = d3.svg.axis()
               .scale(yScale).orient("left")
               .innerTickSize(myTickSize);

我收到 Error: Invalid value for attribute x2="NaN" 错误。

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

tickSize 函数只能接受数字作为参数，不能接受函数，但还有其他解决方案。

最简单的方法？绘制轴后，选择所有刻度线并根据它们的数据值调整它们的大小。请记住，您也必须在每次重绘轴后执行此操作。

示例：
https://jsfiddle.net/zUj3E/1/

关键代码：

d3.selectAll("g.y.axis g.tick line")
    .attr("x2", function(d){
    //d for the tick line is the value
    //of that tick 
    //(a number between 0 and 1, in this case)
       if ( (10*d)%2 ) //if it's an even multiple of 10%
           return 10;
       else
           return 4;
    });

请注意，最大值和最小值处的刻度线也被绘制为与轴线相同的<path> 的一部分，因此缩短它们不会产生太大影响。如果您不喜欢这种缺乏控制，请在设置轴时声明“外部”刻度的长度为零。这会关闭路径的拐角，但外部刻度线仍将具有您可以控制的线条，与其他刻度线相同：

var axis = d3.svg.axis()
    .tickSize(10,0)

示例：https://jsfiddle.net/zUj3E/2/

如果这不起作用，请在谷歌上搜索主要/次要刻度模式的示例。只需确保您正在查看的示例使用 d3 版本 3：版本 2 中添加了一些额外的与刻度相关的方法，这些方法不再受支持。 See this SO Q&A.

【讨论】：

.tickSize(10)

【解决方案2】：

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

            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 "hide";
                           }
                           return;
                       } );
            humiditySVG.selectAll( "line" )
                .attr( "x2", function ( d ) {
                           if ( $.inArray(d, [0,50,100])==-1  ) {
                               return 1;
                           } else {
                               return 3;
                           }
                           return;
                       } );

【讨论】：