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; });

希望这会有所帮助。

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

1 个答案: