如何在不删除重新创建所有内容的情况下更新转换中的数据元素？答案

【问题标题】：How to update data elements within a transition without deleting a re-creating everything?如何在不删除重新创建所有内容的情况下更新转换中的数据元素？
【发布时间】：2017-11-15 14:30:17
【问题描述】：

我正在使用 d3js v3 有一个热图，在更改比率按钮选择时，我会将数据从一个数据集切换到另一个数据集。初始化需要很多步骤，例如

var svg = d3.select("#myId").append("svg");
...
var heatNode = svg.append("g");
heatNode.selectAll(".cellrect")
   .data(data, function(d) { return d.row + ":" + d.col; })
   .enter()
   .append("rect")
   .attr("x", function(d) { return (d.col - 1) * (cellWidth + cellMargin); })
   .attr("y", function(d) { return (d.row - 1) * (cellHeight +  + cellMargin); })
   .attr("class", function(d) { return "cell cell-border cr" + (d.row-1) + " cc" + (d.col-1); })
   .attr("width", cellWidth)
   .attr("height", cellHeight)
   .style("fill", function(d) { return colorScale(d.value); })
   .on("mouseover", function(d) {
       // highlight text
       d3.select(this).classed("cell-hover", true);
       d3.selectAll(id + " .rowLabel").classed("text-highlight", function(r, ri) { return ri == (d.row - 1); });
       d3.selectAll(id + " .colLabel").classed("text-highlight", function(c, ci) { return ci == (d.col - 1); });
            })
   .on("mouseout", function(d) {
       d3.select(this).classed("cell-hover", false);
       d3.selectAll(id + " .rowLabel").classed("text-highlight", false);
       d3.selectAll(id + " .colLabel").classed("text-highlight", false);
   });

现在我得到了新数据，只想更新fill 颜色，别无其他。所以我尝试了没有成功：

   heatNode.selectAll(".cellrect").transition().duration(2000)
       .data(newData, function(d) { return d.row + ":" + d.col; })
       .style("fill", function(d) { return colorScale(d.value); });

到目前为止对我有用的唯一方法是做一个丑陋的：

   heatNode.selectAll("*").transition().duration(2000).remove();

然后重新创建所有内容，然而，即使这样，过渡也不适合我。

【问题讨论】：

标签： d3.js

【解决方案1】：

代码看起来是对的，但是如果你想使用这个类再次选择元素，你需要将 cellrect 类添加到第一个选择中

heatNode.selectAll(".cellrect")
   .data(data, function(d) { return d.row + ":" + d.col; })
   .enter()
   .append("rect")
   .attr("x", function(d) { return (d.col - 1) * (cellWidth + cellMargin);})
   .attr("y", function(d) { return (d.row - 1) * (cellHeight +  + cellMargin); })
   .attr("class", function(d) { return "cellrect cell cell-border cr" + (d.row-1) + " cc" + (d.col-1); })

...

【讨论】：