Блог

Очень новичок D3 здесь, нащупываю способ адаптации существующей радиолокационной диаграммы, построенной в D3 v3.5.9.У меня проблема с интерполяцией между точками, когда между ними нулевые значения.

Пример:

радар, когда присутствуют все точки данных, выглядит нормально

радар при нулевых значениях

Поведение, которое я хочу, чтобы интерполяция шла по кругу, а не просто закрывала участки, ограниченные ненулевыми значениями.

зеленые линии показывают желаемое поведение при столкновении с нулем

Я использовал функцию «определено», чтобы найти нулевые значения в исходных данных, но мне нужно добавить что-то еще, чтобы дать команду D3 провести соединительные линии между нужными точками. Возможно, что-то со значением индекса для d? Или, может быть, «определено» не является правильной функцией в данном случае?

   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");

 

Любая помощь будет очень признательна!