如何更新转换中的数据元素而不删除重新创建的所有内容?

我使用的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(); 

然而,即使是这样的转变对我来说也不起作用。