SVG D3过滤

Question

我有这样的数据：

dataset = 
    { 
     "steps": [ 
      { 
       "id": 1, 
       "x": 10, 
       "y": 10 
      }, 
      { 
       "id": 2, 
       "x": 20, 
       "y": 20 
      } 
     ], 
     "links": [ 
      {"source": 1,"target": 2}, 
      {"source": 2,"target": 1} 
     ] 
    } 

我想画的路径，只有当源<目标，所以我这样做：

var links = svgContainer.selectAll('.link') 
    .data(dataset.links) 
    .enter() 
    .append('path') 
    .filter(function(d){ d.source < d.target; }) 
    .attr('class', 'link') 
    .each(function(d, i) { 
    d.x1 = dataset.steps[d.source - 1].x; 
    d.y1 = dataset.steps[d.source - 1].y; 
    d.x2 = dataset.steps[d.target -1 ].x; 
    d.y2 = dataset.steps[d.target - 1].y; 
    d.xCP = dataset.steps[d.target -1 ].x; 
    d.yCP = dataset.steps[d.source - 1].y; 
    }) 
    .attr('d', function(d) { 
    return "M" + d.x1 + "," + d.y1 
     + "C" + d.xCP + "," + d.yCP 
     + " " + d.xCP + "," + d.yCP 
     + " " + d.x2 + "," + d.y2; 
    }); 

我不知道我不是画什么。如果我删除.filter（）它可以正常工作并绘制所有路径。

Answer 1

您错过了过滤器函数中的return语句。

变化

.filter(function(d){ d.source < d.target; })

与

.filter(function(d){ 
     if(d.source < d.target){ 
     return d; 
     } 
})