轴上的自定义刻度大小 (d3js) [英] Custom tick size on axis (d3js)

问题描述

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

I am creating a svg x-y-chart in d3.js. Is it possible to create ticks of different lengths depending on tickValue?

我已经制作了自己的 tickFormat 函数 myTickFormat 并在 .tickFormat([format]) 中使用它并且效果很好，因为 [format] 预计是一个函数.但是对于 .innerTickSize([size]) 是不可能的，它需要一个数字.

I have made my own tickFormat function myTickFormat and use that in .tickFormat([format]) and that works fine because [format] is expected to be a function. But it is not possible to do the same with .innerTickSize([size]), which expects a number.

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

E.g. if I want the tick at value 70 to be longer I want to do something like this:

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

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

But when I use myTickSize as argument to .innerTickSize():

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

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

I get an Error: Invalid value for attribute x2="NaN" error for each tick.

推荐答案

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

The tickSize function can only accept a number as argument, not a function, but there are other solutions.

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

The easiest approach? After the axis is drawn, select all the tick lines and resize them according to their data value. Just remember that you'll have to do this after every axis redraw, as well.

示例:
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;
    });

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

Note that the tick marks at the max and min values are also drawn as part of the same <path> as the axis line, so shortening them doesn't have much effect. If you don't like that lack of control, declare the "outer" ticks to have zero length when you set up the axis. That turns off the corners of the path, but the outer ticks will still have lines that you can control the same as the other tick lines:

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

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

如果这不起作用，请谷歌搜索主要/次要刻度模式的示例.只需确保您正在查看的示例使用 d3 版本 3:在版本 2 中添加了一些不再受支持的额外刻度相关方法.请参阅此 SO 问答.

If that doesn't work, google for examples of major/minor tick patterns. Just make sure the example you're looking at uses d3 version 3: there were a few extra tick-related methods added in version 2 that are no longer supported. See this SO Q&A.

这篇关于轴上的自定义刻度大小 (d3js)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！