D3 v3雷达图径向线插值点位判定与零值场景连线规则实现

问题根因 #

你当前使用的defined函数作用是标记需要被线生成器跳过的点位，零值点被过滤后，D3会直接连接前后两个非零点，才会出现你看到的异常闭合效果，该配置不符合当前场景需求，首先需要移除这段配置。

解决方案 #

步骤1：移除defined配置 #

删除radial()链式调用中的.defined(function (d) { return d.value !== 0; })代码。

步骤2：调整零值点的半径逻辑 #

你期望的“沿圆形周向绘制”本质是让零值对应段落的半径保持固定，仅角度发生变化，你可以根据自己的需求选择以下两种实现：

方案A：零值段落沿雷达图最外圈绘制（匹配预期效果）

直接修改radius访问器，零值时使用半径刻度的最大值（即雷达图最外圈半径）：

var radarLine = d3.svg.line
  .radial()
  .interpolate("linear-closed")
  .radius(function (d) {
    // 零值时返回最大半径，对应雷达图最外圈，线条沿周向绘制
    return d.value === 0 ? rScale.range()[1] : rScale(d.value);
  })
  .angle(function (d, i) {
    return i * angleSlice;
  });

方案B：零值段落沿最近非零点的半径绘制

如果需要零值段落和相邻非零点保持相同半径，可先预处理每条雷达线的数据，再调整半径访问器：

// 预处理数据，给零值点设置对应半径
var processedData = data.map(function(lineData) {
  const nonZeroPoints = lineData.filter(p => p.value !== 0);
  // 全零数据直接返回
  if (nonZeroPoints.length === 0) return lineData;
  // 遍历给零值点设置半径，这里取最近非零点的半径，可按需调整逻辑
  return lineData.map((point, idx) => {
    if (point.value !== 0) return point;
    // 这里示例取前一个非零点的半径，雷达图是闭合结构，可按需扩展首尾循环逻辑
    let prevIdx = (idx - 1 + lineData.length) % lineData.length;
    while(lineData[prevIdx].value === 0) {
      prevIdx = (prevIdx - 1 + lineData.length) % lineData.length;
    }
    return {
      ...point,
      customRadius: rScale(lineData[prevIdx].value)
    }
  });
});

// 修改radarLine的radius访问器
var radarLine = d3.svg.line
  .radial()
  .interpolate("linear-closed")
  .radius(function (d) {
    return d.customRadius || rScale(d.value);
  })
  .angle(function (d, i) {
    return i * angleSlice;
  });

// 后续渲染时使用处理后的processedData替换原来的data即可

步骤3：平滑插值兼容 #

你原有配置的cardinal-closed平滑插值逻辑不受影响，无需修改。

内容的提问来源于stack exchange，提问作者Frank Packer