1

I have this http://jsfiddle.net/thechrisjordan/p4Fwm/11/, where I'm manipulating a d3 pack layout with an HTML5 slider. Everything is working as I would like except for how the nodes are ordered when updateVis() is called.

This code is pretty straight forward: I'm creating the layout, and then the slider emits an event which causes the layout to update.

What I'm hoping to achieve is this same behavior but to have the child nodes remain in their same general areas in the pack as they change size. As you can see, they reposition themselves here.

It looks like my issue is line 69 where pack.nodes(data); is called. I've dug into d3 source but can't figure out how to prevent this reordering (and it may very well not be possible...).

I suppose an alternative would be to try and squeeze the pack layout into a force layout.

I'm brand new to d3 and am grateful for any insight here.

4

1 回答 1

2

如果我理解你的要求，我很确定这是可行的。这是小提琴；我添加了一些 RGB 乐趣来帮助跟踪圆圈。

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

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

希望这有帮助。

于 2014-03-10T21:55:15.697 回答