javascript - Sunburst 分区数据被同一页上的第二个 sunburst 覆盖

Question

在这里发布问题和答案，以免其他人以后遇到同样的麻烦......

当我使用 d3.layout.partition 创建两个旭日图时，在调整切片大小时，第一个旭日的切片比例被第二个旭日的切片比例覆盖。

这两个图表将不同的 .value 访问器函数传递到分区布局中，例如

d3.layout.partition()
.sort(null)
.value(function(d) { return 1; });

对比

d3.layout.partition()
.sort(null)
.value(function(d) { return d.size; });

并且它们生成自己的节点列表，这些节点不在两个旭日之间共享。但是，如果我重新调用 d3.svg.arc 生成器以调整到更大的半径(但不改变整体比例)，切片 Angular 会突然被覆盖。

请参阅此处示例:http://bl.ocks.org/explunit/ab8cf15534f7fec5ac6d

Answer 1

问题是虽然 partition.nodes() 似乎 生成一个新的数据结构(例如，如果你给它一些 .key函数，它将额外的属性(例如 .x、.y、.dx、dy)写入底层数据并且不复制数据。因此，如果数据结构在两个图表之间共享，则这些.x、.y、.dx、dy 属性将渗透到其他图表。

这对我来说似乎是一个错误，但在阅读中this old GitHub issue它似乎被视为“设计使然”。也许会在未来的版本中重新考虑。

一种解决方法是使用像 Lodash/Underscore cloneDeep 或 Angular 的 copy 这样的东西来让每个图表都有自己的数据副本。

makeSunburst(null, _.cloneDeep(root), countAccessorFn);
makeSunburst(null, _.cloneDeep(root), sizeAccessorFn);

请参阅此处示例:http://bl.ocks.org/explunit/e9efb830439247eea1be