javascript - D3中time.scale上的动态tickValues

我在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-我还能在这里尝试什么？

我想实现这一目标：

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

最佳答案

最后，我从数据中创建了所有日期点的新数组，然后将其传递给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解释。

关于javascript - D3中time.scale上的动态tickValues，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30482535/