Question

所以我尝试在D3中创建一个树（从here改编而来），根据它们的值显示一系列特定颜色的节点。问题是我以设定的间隔获取可能会改变这些值的新数据。我希望树在收到新信息时相应地更新颜色。我尝试了许多不同的方法，导致整个树重绘自己，飞到屏幕上，并自动扩展每个节点的孩子。我正在寻找的期望效果是更新节点的颜色要更改，而树尊重折叠/未折叠节点的状态，用户没有看到整个树重置自身。这可能吗？

这是我到目前为止所拥有的：

＆＃13;

.node {
  cursor: pointer;
}

.overlay {
  background-color: #EEE;
}

.node circle {
  fill: #fff;
  stroke: gray;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

.templink {
  fill: none;
  stroke: red;
  stroke-width: 3px;
}

.ghostCircle.show {
  display: block;
}

.ghostCircle,
.activeDrag .ghostCircle {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="tree-container"></div>

＆＃13;

:PlugInstall

＆＃13;

我找到了一个很好的例子here

它基本上完全符合我的要求。但是，我不希望在进行选择时更新树，而是希望在收到新数据时自动更新。我也想在AngularJS中看到它。我试图从该示例中实现相同类型的更新功能，但是我的左上角仍然是位置，而示例非常顺利！

Answer 1

最好在更新数据管道时重新呈现可视化效果。

您必须保存可视化文件的状态，保留重新呈现可视化文件所需的所有信息，以便您的用户更加明智。

D3树动态更新节点颜色

1 个答案: