1

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!

Frank Packer
  • 47
  • 7
  • 1
    `defined` should work, so we need to see more code, preferably a simplified running version. However, D3 is now in version 7, I for one cannot even remember some methods in v3, so that might make harder for you to get help here. – Gerardo Furtado Sep 06 '21 at 01:59
  • Thank you for the reply. Hopefully I can get this working in the that version of D3 - I'm just not experienced enough (yet) to go through the process of upgrading the whole thing to a newer version. I'll edit the question to include the whole code block for rendering the lines. – Frank Packer Sep 06 '21 at 02:08

0 Answers0