d3js 双层分区：是否可以在不退出和重新进入的情况下更新某些部分？答案

【问题标题】：d3js bilevel partition : Is it possible to update certain parts without exit & re-entring?d3js 双层分区：是否可以在不退出和重新进入的情况下更新某些部分？
【发布时间】：2016-05-18 14:12:32
【问题描述】：

我目前正在使用 d3js Bilevel 分区，因为我们的数据太大而无法一次全部显示。我第一次使用 css 隐藏了最后一层的 sunburst 分区，但是图表每次都不会有相同的大小，这让我很恼火。

用户可以使用范围滑块调整值，这应该会实时更新图表。这在 sunburst 分区

中使用

path.data(partition.nodes) 
                .transition() 
                .duration(1000) 
                .attrTween("d", arcTweenData);

是否也可以在bilevel分区中做类似的事情？

所以基本上是这个sunburst partition，但有双层分区或每次只显示 2 行（如双层分区）。

找到解决方案

我终于找到了解决方案，双层分区默认使用总和，因此不会随着对值的更改而更新。在更新之前再次指定值对我有用。

path = path.data(partition.value(function (d) { return d.value}).nodes(current).slice(1));
       path.transition().duration(750)
           .attrTween("d", function (d) { return arcTween.call(this, updateArc(d)); });

【问题讨论】：

标签： javascript d3.js svg graph charts

【解决方案1】：

Bilevel 与 sunburst 的不同之处在于，虽然它读取数据/节点并将其存储到一个分区中，但它仅通过使用“children”元素显示两层。 Sunburst 将它们全部显示（默认子级）。

在您的情况下，您真正想要的是使用转换更新/刷新路径数据。这可以通过在您想要更新时调用路径上的转换来轻松完成：

path.transition()
      .style("fill-opacity", 1)
      .attrTween("d", function(d) { return arcTween.call(this, updateArc(d)); });

你可以让它在一个时间间隔内更新，或者把它放在一个每当点击按钮时调用的函数中。如果您不更新 d 值，而是更新外部数据变量；您可以简单地使用全局变量传递该新数据值。

function updateVisual(d,newData){
 path.transition()
  .style("fill-opacity", 1)
  .attrTween("d", function(d) { return arcTween.call(this, updateArc(newData));});
} // If d is updated, remove newData and use updateArc(d)

注意：这是假设您使用的是双层分区

【讨论】：