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