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（）函数会很棒，但是如果我没有ticks对象，请让D3设置默认值。这是一个测试解决方案的小提琴：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/

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

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()的调用会获取在轴上指定的任何与tick相关的参数，在本例中为数字5，并将它们作为参数传递给比例的.ticks()方法。您必须使用function.apply才能使其正常工作，因为axis.ticks()返回一个参数数组，而不仅仅是一个值（允许在指定所需类型的刻度时采用多个参数的日期时间刻度）。

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

默认刻度设置d3

1 个答案: