Filtering out points on a line mark

Community Help
1

I have some code for a line in which I would like to insert filter qualifications. Here’s the code:

  const line = d3.line()
    .x(function(d,i) {return x(d.payment_amount);})
    .y(function(d,i) {return y2(d.cum_pct_total_amt);})
    // .curve(d3.curveBasis)
    .curve(d3.curveMonotoneX)
  ;

This code works – however when I try anything like…

  const line = d3.line()
    .x(function(d,i) {if (i % 100==0) return x(d.payment_amount);})
    .y(function(d,i) {if (i % 100==0)  return y2(d.cum_pct_total_amt);})
    // .curve(d3.curveBasis)
    .curve(d3.curveMonotoneX)
  ;

… the code will fail and the line disappears. The same kind of insertion works elsewhere for me, e.g.

      .tickValues(data.map(function(d,i) 
        { 
                if ((i % 120 == 0) || (i == xdomain.length-1 )) return d.payment_amount; 
        }))

What am I missing? What should I do to filter the data at the point of the .x( function call, or is that not allowed?

Thanks for your advice!

1 Like
2

The documentation indicates that d3.line().x accepts only one input:

3

Thanks Mark. Does that mean filtering can’t be done in the context of d3.line.x() ? I can imagine something like d3.line.x(somefunction(d,i)) amounting to “just 1” argument.

4

The issue is that, since you return only when i%100 === 0, all pairs of valid points are separated by (99) invalid points, so the line is always interrupted, and the resulting path is empty.

1 Like
5

Whoa – thanks; I’m not sure when I would have realized that. I guess this explains why inline filtering worked in other contexts but not for a line. I “solved” my issue in the end by pre-filtering the data.