title: How to excluded y=0 points in a chart by using D3.js
body: <p>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 <code>if</code> statement to let cy equal to NaN if it is zero, but that doesn't remove them from the svg. Then I read about <a href="https://stackoverflow.com/questions/24855630/d3-skip-null-values-in-line-graph-with-several-lines">this</a> post and tried the <code>defined</code> method but still can't figure out the correct way.</p>
  
  <pre><code>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;
                      })
  </code></pre>
  
  <p>So what should I do to make the line of <code>.defined()</code> work? Thanks~</p>