D3中time.scale上的动态tickValues

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也解释了它。