title: How to define which points for interpolation in radial line
body: <p>Very much D3 newbie here, feeling my way around adapting an existing radar chart built in D3 v3.5.9
  I'm having an issue in interpolating between points when there are zero values between them.</p>
  <p>Example:</p>
  <p><a href="https://i.stack.imgur.com/nJ652.jpg" rel="nofollow noreferrer">radar when all data points are present, looks fine</a></p>
  <p><a href="https://i.stack.imgur.com/OmwkA.jpg" rel="nofollow noreferrer">radar when there are zero values</a></p>
  <p>The behaviour I want is for the interpolation to go <em>around</em> the circle, rather than just closing the sections bounded by the non-zero values.</p>
  <p><a href="https://i.stack.imgur.com/S155F.jpg" rel="nofollow noreferrer">green lines show desired behaviour whenever a zero is encountered</a></p>
  <p>I have used the 'defined' function to find zero values in the source data, but I need to add something else to instruct D3 to draw the connecting lines between the desired points. Something with the index value for d, probably?
  Or perhaps 'defined' is not the right function in this case?</p>
  <pre><code>  var radarLine = d3.svg.line
      .radial()
      .defined(function (d) {
        return d.value !== 0;
      })
      .interpolate(&quot;linear-closed&quot;)
      .radius(function (d) {
        return rScale(d.value);
      })
      .angle(function (d, i) {
        return i * angleSlice;
      });
    if (cfg.roundStrokes) {
      radarLine.interpolate(&quot;cardinal-closed&quot;);
    }
  
    //Create a wrapper for the blobs
    var blobWrapper = g
      .selectAll(&quot;.radarWrapper&quot;)
      .data(data)
      .enter()
      .append(&quot;g&quot;)
      .attr(&quot;class&quot;, &quot;radarWrapper&quot;);
  
    //Append the backgrounds
    blobWrapper
      .append(&quot;path&quot;)
      //.attr(&quot;class&quot;, &quot;radarArea&quot;)
      .attr(&quot;class&quot;, function (d) {
        return &quot;radarArea&quot; + &quot; &quot; + d[0].radar_area.replace(/\s+/g, &quot;&quot;); 
      })
      .attr(&quot;d&quot;, function (d, i) {
        return radarLine(d);
      })
      .style(&quot;fill&quot;, function (d, i) {
        return cfg.color(i);
      })
      .style(&quot;fill-opacity&quot;, 0); 
  
  
    //Create the outlines
    blobWrapper
      .append(&quot;path&quot;)
      .attr(&quot;class&quot;, &quot;radarStroke&quot;)
      .attr(&quot;d&quot;, function (d, i) {
        return radarLine(d);
      })
      .style(&quot;stroke-width&quot;, cfg.strokeWidth + &quot;px&quot;)
      .style(&quot;stroke&quot;, function (d, i) {
        return cfg.color(i);
      })
      .style(&quot;fill&quot;, &quot;none&quot;);
  
  </code></pre>
  <p>Any help would be greatly appreciated!</p>