Question

我是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。

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

Answer 1

我使用.sort()作为@LarsKotthoff建议。这是我的比较器函数，我将原始数组（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

1 个答案: