SVG D3 Filtering

Question

Ich habe diese Daten:

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

Ich möchte einen Weg ziehen nur, wenn Quelle < Ziel, also tat ich dies:

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

Ich weiß nicht, was nichts Zeichnung im, . Wenn ich die .filter() entferne, funktioniert es gut und zeichnet alle Pfade.

Answer 1

Sie vermissen die Rückgabeanweisung in Ihrer Filterfunktion.

ändern

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

mit

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