Question

发布问题＆amp;在这里回答以后为别人解决同样的麻烦...

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

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

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

VS

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

他们会生成自己的节点列表，这些节点不会在两个sunbursts之间共享。但是，如果我重新调用d3.svg.arc生成器调整为更大的半径（但不改变整体比例），则切片角度会突然被覆盖。

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

Answer 1

问题是虽然partition.nodes() 似乎来生成新的数据结构（例如，如果你给它一些.key函数，它会写出额外的属性（例如{{ 1}}，.x，.y，.dx）基础数据和不会复制数据。因此，如果数据结构是共享的在两个图表之间，这些dy，.x，.y，.dx属性会渗透到其他图表中。

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

一种解决方法是使用Lodash / Underscore dy或Angular cloneDeep之类的东西来使每个图表拥有自己的数据副本。

copy

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

Answer 2

复制每个图表的整个数据集的另一种方法是在重新渲染之前简单地重新计算分区。

不要让makeSunburst()成为访问者的功能，而是使其成为分区的功能。将不同的分区函数传递给每个图表：

// create separate partition variables
var countPartition = d3.layout.partition().sort(null).value(countAccessorFn);
var sizePartition = d3.layout.partition().sort(null).value(sizeAccessorFn);

// make the charts as a function of partition
charts.push(makeSunburst(root, countPartition));
charts.push(makeSunburst(root, sizePartition));

然后在应用转换之前，只需更新nodes变量以反映相关的分区：

addToRadius: function(radiusChange) {
  radius += radiusChange;
  ringRadiusScale.range([0, radius]);

  // update the data before re-rendering each chart
  nodes = partition.nodes(dataRoot);
  path.transition().attr('d', arc);
}

现在，当您更新每个图表时，它正在使用正确的分区。

这是一个updated example。

Sunburst分区数据被第二次sunburst覆盖在同一页面上

2 个答案: