按数组过滤选择而不丢失顺序d3js

Question

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

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

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

之后我使用过滤函数select形成起点和终点之间最短路径的节点（圆圈）。

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

问题是过滤器 selection 丢失了节点的原始顺序。

示例：

原路径：23、24、37、29、30。选择顺序：23、24、29、30、37.

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

Answer 1

我按照@LarsKotthoff 的建议使用了.sort()。这是我的比较器函数，我将原始数组 (ruta) 设为全局，然后我使用 ruta 中的索引位置对选择数组进行排序。

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

按数组过滤选择而不丢失顺序d3js

Filter selection by array without losing order d3js

arrays

sorting

graph

d3.js