How to define which points for interpolation in radial line

213 Views Asked by At

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.

Example:

radar when all data points are present, looks fine

radar when there are zero values

The behaviour I want is for the interpolation to go around the circle, rather than just closing the sections bounded by the non-zero values.

green lines show desired behaviour whenever a zero is encountered

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?

  var radarLine = d3.svg.line
    .radial()
    .defined(function (d) {
      return d.value !== 0;
    })
    .interpolate("linear-closed")
    .radius(function (d) {
      return rScale(d.value);
    })
    .angle(function (d, i) {
      return i * angleSlice;
    });
  if (cfg.roundStrokes) {
    radarLine.interpolate("cardinal-closed");
  }

  //Create a wrapper for the blobs
  var blobWrapper = g
    .selectAll(".radarWrapper")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "radarWrapper");

  //Append the backgrounds
  blobWrapper
    .append("path")
    //.attr("class", "radarArea")
    .attr("class", function (d) {
      return "radarArea" + " " + d[0].radar_area.replace(/\s+/g, ""); 
    })
    .attr("d", function (d, i) {
      return radarLine(d);
    })
    .style("fill", function (d, i) {
      return cfg.color(i);
    })
    .style("fill-opacity", 0); 


  //Create the outlines
  blobWrapper
    .append("path")
    .attr("class", "radarStroke")
    .attr("d", function (d, i) {
      return radarLine(d);
    })
    .style("stroke-width", cfg.strokeWidth + "px")
    .style("stroke", function (d, i) {
      return cfg.color(i);
    })
    .style("fill", "none");

Any help would be greatly appreciated!

0

There are 0 best solutions below