Question

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

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

中使用了它

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

是否也可以在双层分区中执行类似操作？

基本上这个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)); });

Answer 1

Bilevel与sunburst的不同之处在于，虽然它将数据/节点读取并存储到分区中，但它只使用＆＃34; children＆＃34;元件。 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)

注意：这是假设您正在使用Bilevel Partition

d3js双层分区：是否可以更新某些部分而无需退出＆amp;重新entring？

1 个答案: