CODEWITHSUNDEEP
d3.jssvgfilter
Noelia Belen Lopez
Noelia Belen Lopez

Reputation: 91

SVG D3 Filtering

I have this data:

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

I want to draw a path ONLY when source < target, so I did this:

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

I dont know what im not drawing anything. If I remove the .filter() it works fine and draw all the paths.

Upvotes: 1

Views: 186

Answers (1)

eko
eko

Reputation: 40647

You are missing the return statement inside your filter function.

Change

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

with

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

Upvotes: 1

Related Questions