使用d3.js将贝塞尔路径追加至现有SVG时遇问题求助

我太懂这种卡了两天的憋屈感了——明明同一份SVG在alpha/beta为0时能正常渲染，换个参数就直接歇菜，大概率是代码里的小细节没踩对。咱们一步步捋清楚问题：

1. 最致命的错误：<path>元素被嵌套了 #

你这段代码里的路径追加逻辑有个核心问题：

svg.selectAll('Path') 
.append('path')

selectAll('Path')会选中SVG里所有已存在的<path>标签，然后给每个选中的路径追加一个子路径——但SVG规范里<path>是绝对不能嵌套的，浏览器会直接忽略这种错误结构，自然看不到新生成的贝塞尔曲线。

直接改成在SVG根节点下追加路径就行：

svg.append('path')

2. 冗余的判断逻辑可以删掉 #

你循环里写了j <= paths[i].length - 2，又额外加了if (j != paths[i].length - 1)——这俩判断完全重复，因为j的最大值就是paths[i].length - 2，永远不会等于paths[i].length - 1。删掉这个冗余的if，避免后续逻辑混乱。

3. 先确认路径格式是否合法 #

在循环里加个console.log(paths[i][j])，看看EB.returnBezeirs返回的是不是标准的SVG路径指令（比如开头是M，后面跟着贝塞尔曲线的C/Q指令）。有时候d3-path生成的路径可能缺起始点，或者格式有误，这种情况下浏览器也渲染不出来。

4. 滑块回调里记得清理旧路径 #

拖动滑块调用this.external时，要是不清理之前生成的贝塞尔路径，新路径会堆在旧路径上面，要么导致视觉混乱，要么看起来像是没生成新路径。可以在external函数开头加一行：

svg.selectAll('path.bezier').remove();

同时给生成的贝塞尔路径加个类名bezier，方便精准清除：

svg.append('path')
  .attr("class", "bezier") // 新增类名
  .attr("d", paths[i][j]) 
  // ...其他样式设置

5. 确认SVG变量的作用域 #

检查else分支里的svg变量和if分支里的是不是同一个实例——要是svg是在if块里定义的局部变量，else分支可能拿不到正确的SVG对象，自然没法追加元素。

修复后的核心代码示例 #

把生成路径的循环改成这样：

// 先清理旧的贝塞尔路径
svg.selectAll('path.bezier').remove();

for (var i = 0; i < paths.length; i++) { 
  var color = paths[i][paths[i].length - 1];
  // 遍历除了最后一个颜色元素之外的所有路径
  for (var j = 0; j < paths[i].length - 1; j++) { 
    svg.append('path')
      .attr("class", "bezier")
      .attr("d", paths[i][j]) 
      .style("stroke", color) 
      .style("fill", "none") 
      .style("opacity", 0.5);
  } 
}

先试试这些调整，应该能解决大部分问题。如果还是不行，可以打印一下paths数组的完整结构，看看是不是数据层面出了问题~

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