javascript - D3 将更新选择限制为具有实际更改的条目？

Question

我正在使用 d3 将我通过 websockets 接收的数据显示为一个简单的 html 表格。到目前为止效果很好。 现在我需要可视化对该数据的更改，因此我想使用带有背景颜色的过渡或其他东西来直观地突出显示已更改的单元格。

这是我使用的代码:

var data = new d3.map({"In1": false, "Reg1": 0815});

data.set("In2", true);
data.set("Reg2", 4711);

var table = d3.select("#foo").append("table").attr("class", "table table-bordered table-striped");

var thead = table.append("thead");
thead.append("th").text("Test");

var tbody = table.append("tbody");

update(data.entries());

当我通过 websockets 接收到新数据时，我只需通过 data.set(key,value) 更新数据映射并调用更新函数:

function update(data) {
    var rows = tbody.selectAll("tr")
        .data(data);

    rows.exit().remove();
    rows.enter().append("tr");

    // create a cell in each row for each column
    var cells = rows.selectAll("td")
        .data(function (row) {
            return [row.key, row.value];
        });

    cells.enter().append("td");

    cells.text(function (d) { return d; });
    cells.transition().style('color', 'red').transition().style('color', 'green');
}

问题是更新选择似乎适用于所有元素，而不仅仅是那些值实际发生变化的元素(这是我希望的)。 这是我做错了什么，还是通常都是这样？如果是这样，我如何才能将转换仅应用于实际更改的元素？

编辑:创建了一个 jsfiddle ，您会看到所有表格单元格都是动画的，我只希望“Reg2”的值单元格是....

Answer 1

D3 没有为此提供任何开箱即用的东西，但一种方法是将旧数据与元素一起存储，然后在更新时将新旧数据进行比较以查看它是否已更改。这样，您可以过滤您的元素并将转换仅应用于数据已更改的元素:

cells.filter(function() { return this.__olddata__ != this.__data__; })
        .each(function() { this.__olddata__ = this.__data__; })
        .transition().style('color', 'red').transition().style('color', 'green');

完整演示 here .