Question

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

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

Answer 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); })

...

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

1 个答案: