按数组过滤选择而不会丢失订单d3js(Filter selection by array without losing order d3js)

按数组过滤选择而不会丢失订单d3js(Filter selection by array without losing order d3js)

我是d3js中的新手，我想在圆圈表示的图形中的两个节点之间创建动画。

我使用函数路径计算了起始节点和结束节点之间的最短路径。 它返回一个圆的id数组，表示从源（开始）到目标（结束）必须遵循的路径。 像这样：23,24,37,29,30。

var ruta = path(data.pred, start, end);

之后，我使用过滤器功能选择形成开始和结束之间最短路径的节点（圆圈）。

var selection = svg.selectAll('circle').filter(function(d){ return ruta.indexOf(d.index.toString()) >- 1;});

然后，我尝试使用这个简单的过渡动画路径，逐个改变圆的大小。

selection.transition() .delay(function(d,i) { return i/ len * enter_duration;}) .style("opacity",1.0) .attr("r", 10.0) .each("end",function() { d3.select(this). transition() .delay(function(d,i) { return i/ len * enter_duration;}) .attr("r",7) .style("opacity",0.7); });

问题是滤波器选择会丢失节点的原始顺序。

例：

原始路径：23,24,37,29,30。选择顺序： 23,24,29,30,37。

如何根据原始数组重新排序选择对象？

I'm newbie in d3js and I want to create an animation between two nodes in a graph represented by circles.

I have calculated the shortest path between start and end nodes using the function path. It returns an array of circle's ids that represent the path that you must follow from source (start) to target(end). Something like this: 23, 24, 37, 29, 30.

var ruta = path(data.pred, start, end);

After that I used the filter function to select the nodes (circles) that forms the shortest path between start and end.

var selection = svg.selectAll('circle').filter(function(d){ return ruta.indexOf(d.index.toString()) >- 1;});

Then, I tried to animate the path using this simple transition, changing the size of circles one by one.

selection.transition() .delay(function(d,i) { return i/ len * enter_duration;}) .style("opacity",1.0) .attr("r", 10.0) .each("end",function() { d3.select(this). transition() .delay(function(d,i) { return i/ len * enter_duration;}) .attr("r",7) .style("opacity",0.7); });

The problem is that the filter selection losses the original order of nodes.

Example:

Original path: 23, 24, 37, 29, 30. Selection order: 23, 24, 29, 30, 37.

How can I reorder the selection objects based on the original array?

最满意答案

我使用.sort()作为@LarsKotthoff建议。 这是我的比较器函数，我将原始数组（ruta）设为全局，然后我使用ruta中的索引位置来排序de selection数组。

sortItems = function (a, b) { value_a = ruta.indexOf(a.id.toString()); value_b = ruta.indexOf(b.id.toString()) return value_a - value_b ; };

这是对选择进行排序的代码

selection **.sort(sortItems)** .transition() .delay(function(d,i) { return i/ len * enter_duration;}) .style("opacity",1.0) .attr("r", 10.0) .each("end",function() { d3.select(this) .transition() .delay(function(d,i) { return i/ len * enter_duration;}) .attr("r",7) .style("opacity",0.7); });

I used .sort() as @LarsKotthoff suggested. This is my comparator function, I made the original array (ruta) global and then I used index position in ruta to sorting de selection array.

sortItems = function (a, b) { value_a = ruta.indexOf(a.id.toString()); value_b = ruta.indexOf(b.id.toString()) return value_a - value_b ; };

And this is the code to sorting the selection

selection **.sort(sortItems)** .transition() .delay(function(d,i) { return i/ len * enter_duration;}) .style("opacity",1.0) .attr("r", 10.0) .each("end",function() { d3.select(this) .transition() .delay(function(d,i) { return i/ len * enter_duration;}) .attr("r",7) .style("opacity",0.7); });