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

У вас отсутствует оператор возврата внутри функции фильтра.

Изменить

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

с

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