javascript - D3 树形图重置颜色

Question

我目前正在开发一个使用树形图的软件可视化工具。

IMG:https://www.dropbox.com/s/7s5np5x7or94tky/Screenshot%202014-03-25%2010.31.51.png

在我的工具中，您可以搜索元素，然后根据您选择的颜色在树状图中突出显示这些元素。现在我需要将元素的颜色恢复为突出显示之前的颜色。

有什么方法可以完全重新渲染树状图，或者更好的方法来恢复单个元素(例如d3.select("#e-123").resetColor())？

Answer 1

D3 中没有“重置”属性值的功能。这里有两个选项。

为突出显示指定 CSS 类

突出显示的代码将类似于

d3.select("foo").classed("highlight", true);

并重置

d3.select("foo").classed("highlight", false);

设置时将旧属性值与数据一起存储

要设置突出显示，代码如下所示

d3.select("foo").attr("color", function(d) {
  d.oldColor = d3.select(this).attr("color");
  return newColor;
});

然后重置

d3.select("foo").attr("color", function(d) { return d.oldColor; });

第一种方法代码较少，但如果您有大量不同的颜色，第二种方法可能更方便。