重启D3条形图动画

Question

我正在开发一个小部件，它在滑动轮播中一个接一个地显示具有不同值的多个 D3 条形图。

当页面加载时，条形图会正常播放，但是当页面转到下一个图表时 - 无论是点击还是单独播放 - 我希望它每次都重新启动动画。我试过在控制台中调用 animateChart()，但这不起作用。

我正在寻找可以从控制台或其他函数调用的函数，例如 animateChart()，它将重新加载 D3 条形图动画。

这是我的小工具 link：

http://jsfiddle.net/alocdk/oa5tg1qu/1/

Answer 1

我找到了可以增强 animateChart 功能的地方。

事实上，您只修改了进入您的图表的数据。

通过调用：

d3.select(svg)
        .selectAll("rect")
        .data(data)
        .enter().append("rect")
[...]

此后的所有内容仅适用于新数据。

您可能需要阅读这些内容以了解 D3 中数据更新遵循的模式。

这是我的截图http://jsfiddle.net/uknynmqa/1/

我已经删除了您在所有 svg 上所做的循环，因为我假设您只想为当前的 svg 制作动画。

并且您的函数正在更新所有数据，而不仅仅是那些由于 :

而输入的数据

// Update the data for all
var join = d3.select(svg)
    .selectAll("rect")
    .data(data);

// Append new data.
join.enter().append("rect")      
    .attr("class", function (d, i) {
        var low = ""
        i == minIndex ? low = " low" : "";
        return "bar" + " " + "index_" + i + low;
    })

// Update everyone.
join.attr("width", barWidth)
    .attr("x", function (d, i) {
        return barWidth * i + barSpace * i;
    })
    .attr("y", chartHeight)
    .attr("height", 0)
    .transition()
    .delay(function (d, i) {
        return i * 100;
    })
    .attr("y", function (d, i) {
        return chartHeight - y(d);
    })
    .attr("height", function (d) {
        return y(d);
    });

D3 正在遵循一个非常具体的数据更新模式。

根据你想做什么，你可以按照这个。是否要设置动画由您决定。

// Link data to your graph and get the join
var join = svg.selectAll('rect')
    .data(data);

// Update data already there
join.attr('x', 0);

// Append the new data
join.enter().append('rect')
    .attr('x', 0);

// Remove exiting elements not linked to any data anymore
join.exit().remove();

// Update all resulting elements
join.attr('x', 0);

重启D3条形图动画

Restart D3 bar chart animation

javascript

charts

animation

restart

d3.js