D3.js 动态更新D3图表

这个想法是有一个d3垂直条形图，将提供实时数据。 我使用setInterval函数模拟实时数据，该函数更新数据集中元素的值：

var updateData = function(){
    a = parseInt(Math.random() * 100),
    b = parseInt(Math.random() * 100),
    c = parseInt(Math.random() * 100),
    d = parseInt(Math.random() * 100);
    dataset = [a, b, c, d];
    console.log(dataset);
};

// simullate live data input
var update = setInterval(updateData, 1000);

我想每2秒更新一次图表。 为此，我需要一个更新函数，该函数获取新数据集，然后设置转换动画以显示新结果。 就像这样：

var updateVis = function(){
   ..........
};

var updateLoop = setInterval(drawVis,2000);

我不想简单地删除图表并再次绘制。我想为每个条设置新旧条高度之间的过渡动画

签出

这就是方法。 想想你做了什么来得到最初的图表： 1） 获取数据 2） 将其绑定到元素（

.enter（）

） 3） 将元素属性设置为数据的函数

好吧，你再来一次： 在函数

updateData

中，您将获得一个新的

dataset

，这是第一步。 然后，重新绑定它：

d3.selectAll("rect").data(dataset);

最后更新属性：

d3.selectAll("rect").attr("y",  function(d) {
        return y(d);
    })
    .attr("height", function(d) {
        return h - y(d);
    });

（想要转换吗？去吧。添加代码很容易，但如果想深入理解，最好阅读）

---

由于您不需要更改条数，这可以简单到：

var updateVis = function(){
   svg.selectAll(".input")
    .data(dataset)
    .transition()
    .attr("y",  function(d) {
            return y(d);
        })
        .attr("height", function(d) {
            return h - y(d);
    });
};

更新

但你的下一个问题是，如果我需要不同数量的酒吧怎么办？这是您需要更好地处理输入、更新和退出的地方。可以为初始绘制或更新编写一个函数

function drawVis(){

 // update selection
 var uSel = svg.selectAll(".input")
        .data(dataset);

 // those exiting
 uSel.exit().remove();

 // new bars
 uSel
        .enter()
        .append("rect")
        .attr("class", "input")
        .attr("fill", "rgb(250, 128, 114)");

 // update all
 uSel
        .attr("x", function(d, i) {
            return i * (w / dataset.length) + 2.5/100 * w;
        })
        .attr("width", w / dataset.length - barPadding)
        .attr("height", y(0))
        .transition().duration(750).ease("linear")
        .attr("y",  function(d) {
            return y(d);
        })
        .attr("height", function(d) {
            return h - y(d);
});

}

新的