javascript - D3 中 time.scale 的动态刻度值

Question

我在 D3 中构建了一个图表，以根据日期时间和支出金额显示支出，但我无法在 time.scale 上动态设置 tickValues() 以仅显示数据的刻度点。

我的比例设置是:

   var dateScale = d3.time.scale()
        .domain(d3.extent(newData, function(d) { return d.Date; }))
        .range([padding, width - padding]);

    var amountScale = d3.scale.linear()
        .domain([0, d3.max(newData, function(d) { return d.Amount; })])
        .range([window.height - padding, padding]);

    // Define date Axis
    var dateAxis = d3.svg.axis().scale(dateScale)
        .tickFormat(d3.time.format('%a %d %m'))
        .tickSize(100 - height)
        .orient("bottom");

    // Draw date Axis
    svg.append("g")
        .attr({
            "class": "axis date-axis",
            "transform": "translate(" + [0, height -padding] + ")"
        }).call(dateAxis);

    // Define amount Axis
    var amountAxis = d3.svg.axis().scale(amountScale)
        .tickSize(1)
        .orient("left");

    // Draw amount Axis
    svg.append("g")
        .attr({
            "class": "axis amount-axis",
            "transform": "translate(" + padding + ",0)"
        }).call(amountAxis);   

我尝试过设置
dateAxis.tickValues(d3.extent(newData, function(d) { return d.Date; }))
但这仅返回日期轴的最小值和最大值。
另外 tickValues() 本身不接受 newData - 我还能在这里尝试什么？

我想实现这个:

仅突出显示与相应数据关联的刻度。

Answer 1

我最终从我的数据中创建了所有日期点的新数组，并将其传递给 tickValues() 方法。我现在的代码是:

var newData = toArray(uniqueBy(data, function(x){return x.Date;}, function(x, y){ x.Amount += y.Amount; return x; }));

    // Create array of data date points
    var tickValues = newData.map(function(d){return d.Date;});

    // Sorting data ascending
    newData = newData.sort(sortByDateAscending);

    var dateScale = d3.time.scale()
        .domain(d3.extent(newData, function(d) { return d.Date; }))
        .range([padding, width - padding]);

    var amountScale = d3.scale.linear()
        .domain([0, d3.max(newData, function(d) { return d.Amount; })])
        .range([window.height - padding, padding]);

    // Define date Axis
    var dateAxis = d3.svg.axis().scale(dateScale)
        .tickFormat(d3.time.format('%d %m %Y'))
        .tickValues(tickValues)
        .orient("bottom");   

现在整个图表看起来是这样的:

我找到了这个SO (@AmeliaBR) answer解释 tickValues() 函数，以及 here is documentation也为了它。