使用 HTML5 范围输入操作 d3.js 包布局

Question

我有这个http://jsfiddle.net/thechrisjordan/p4Fwm/11/，我正在使用 HTML5 滑块操作 d3 包布局。除了调用 updateVis() 时节点的排序方式外，一切都按我的意愿工作。

这段代码非常简单：我正在创建布局，然后滑块发出一个导致布局更新的事件。

我希望实现的是相同的行为，但让子节点在更改大小时保持在包中相同的一般区域中。如您所见，他们在这里重新定位。

看来我的问题是第 69 行，其中调用了 pack.nodes(data);。我已经深入研究了 d3 源代码，但不知道如何防止这种重新排序（而且很可能不可能......）。

我想另一种方法是尝试将包布局压缩到强制布局中。

我是 d3 的新手，非常感谢这里的任何见解。

Answer 1

如果我理解您的要求，我很确定这是可行的。 Here's the fiddle;我添加了一些 RGB 乐趣来帮助跟踪圆圈。

这是使用包布局的sort() 方法完成的，该方法确保它们以持久的顺序排列。为了实现它，我必须为您声明的每个对象（以及可选的 RGB 颜色）分配一个 index 值：

data.children.forEach(function(d, i) {
    d.index = i;
    d.fill = ['#c33','#3c3','#33c'][i];
});

那么就是用index来排序了：

var pack = d3.layout.pack()
  .size([diameter - 4, diameter - 4])
  .sort(function(a,b) { return d3.ascending(a.index, b.index); }) // <--- this
  .value(function(d) { return d.size; });

希望这会有所帮助。