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

时间:2014-02-05 16:36:12

标签: javascript svg d3.js

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

我已经创建了自己的tickFormat函数myTickFormat,并在.tickFormat([format])中使用它并且工作正常,因为 [format] 应该是一个函数。但是对于期望数字的.innerTickSize([size]),不可能这样做。

E.g。如果我希望值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);

我收到错误:每个标记的属性x2 =“NaN”错误值无效。

2 个答案:

答案 0 :(得分:22)

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相关的方法,这些方法不再受支持。 See this SO Q&A.

答案 1 :(得分:0)

符合我要求的答案的变体。选择我想要的刻度标记代替刻度和值,添加“隐藏”类。但是这可以用于主题的任何变化。

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