How to excluded y=0 points in a chart by using D3.js

Question

I am working on a bubble chart with circles at (cx, cy). However, there are many circles with cy = 0 and I would like to get rid of them. I tried to use an if statement to let cy equal to NaN if it is zero, but that doesn't remove them from the svg. Then I read about this post and tried the defined method but still can't figure out the correct way.

canvas.selectAll("circle")
                .data(data)
                .enter()
                    .append("circle")
                    .attr("cx", function (d) {
                        if (d.handedness=="L") {
                            xp = 50;
                        }if (d.handedness=="R"){
                            xp = 450;
                        }if (d.handedness=="B"){
                            xp = 250;
                        }
                        return xp + xpadding + Math.random()*30;})
                    .attr("cy", function (d) {
                        if(d.avg == 0){
                            cy = Number.NaN;
                        }else{cy = d.avg;}

                        return yscale(cy)})
                    .defined(function(d) {return d != Number.NaN;})
                    .attr("r", 1.5)
                    .style("fill", function(d) {
                        if (d.handedness=="L") {
                            c = "#173ae5";
                        }if(d.handedness=="R"){
                            c = "#b6720c";
                        }if(d.handedness=="B"){
                            c = "#d91ccd";
                        }
                        return c;
                    })

So what should I do to make the line of .defined() work? Thanks~

Filter your data to remove the elements you don't want before passing it to D3. — Lars Kotthoff, Nov 18 '15 at 18:57
@LarsKotthoff, thanks for the hint. I think I should have asked "how to do it" instead of "what should I do". can you show me how to filter the data? — user3768495, Nov 18 '15 at 20:13
I wasn't aware of the existence of `.filter()` before. Thank you! — user3768495, Nov 18 '15 at 22:34

How to excluded y=0 points in a chart by using D3.js

0 Answers0