javascript - 默认刻度设置 d3

Question

是否可以调用 d3.svg.axis() 属性并且(如果没有返回任何内容)仍然让 D3 设置默认值？例如，如果我有刻度值，则设置它们，否则不要:

var x = d3.scale.linear().range([0,440]).domain([0,10])
var svg = d3.select('body').append('svg').attr('width', 400)
var ticks = [1,8]
var axis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .tickValues(function() {
        if(typeof(ticks=='object')) {return ticks}
        else {return this}
        // also tried:
        else {return}
        else {}
    })

调用 .tickValues() 函数会很棒，但如果我没有刻度对象，请让 D3 设置默认值。这是一个用于测试解决方案的 js fiddle :http://jsfiddle.net/sWQUu/

Answer 1

如果你传入null到tickValues函数——您将得到默认行为。

var axis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .tickValues(
       ( (typeof ticks) == 'object') ? 
            ticks : 
            null
    );

http://jsfiddle.net/sWQUu/2/

但是，如果您将函数作为 .tickValues 的参数，这似乎不起作用，并且该函数返回 null:

var axis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .tickValues( function() {
       return ( (typeof ticks) == 'object') ? 
            ticks : 
            null //causes an error
    });

http://jsfiddle.net/sWQUu/3/

如果您需要使用函数，因为您希望每次调用 Axis 时都检查显式刻度值，则可以从刻度中获取默认刻度值:

var axis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .tickValues(function() {
       return ( (typeof ticks) == 'object') ? 
            ticks : 
            x.ticks()
    });

http://jsfiddle.net/sWQUu/4/

或者，更灵活:

var axis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(5)
    .tickValues(function() {
       return ( (typeof ticks) == 'object') ? 
            ticks : 
            x.ticks.apply(x, axis.ticks() );
    });

http://jsfiddle.net/sWQUu/5/

调用axis.ticks()获取已在 Axis 上指定的任何与刻度相关的参数(在本例中为数字 5)，并将它们作为参数传递给刻度的 .ticks()方法。您必须使用function.apply让它发挥作用，因为 axis.ticks()返回一个参数数组，而不仅仅是一个值(以允许在指定所需的刻度类型时采用多个参数的日期时间刻度)。

唯一的问题是我通过变量名称引用比例和 Axis ，而不是通过它们与 Axis 对象的关联，所以如果您更改 x 的含义或axis在此函数中，将使用新值，而不是与该特定 Axis 函数关联的值。 (您不能将它们引用为 Axis 的 this 和比例的 this.scale()，因为 d3 的内部工作意味着通过 d3 选择 <g> 元素作为 this 上下文来调用此函数.)我想不出在什么情况下这可能会成为问题，但无论如何还是要注意一些事情。