轴上的自定义刻度尺寸(d3js)

Question

我在d3.js中创建了一个svg xy-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);

我收到错误:每个tick的属性x2 ="NaN"错误的值无效.

Answer 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中添加了一些额外的与tick相关的方法,这些方法不再受支持. 看到这个问答.