D3.js v4中路径可添加到SVG但无法显示在分组的问题

核心问题1：数据绑定逻辑错误 #

你给分组内的路径使用了.data(data)，这会把data数组的每个元素单独绑定到一个path元素，但d3.line()路径生成器需要接收整个数组才能生成完整的折线路径。单个数据元素无法生成有效的d属性值，导致路径标签无d属性，自然无法显示。

对比能正常显示的SVG曲线，你用的是.datum(data)——它会把整个数组绑定到单个path元素，这才是折线图的正确数据绑定方式。

核心问题2：语法错误 #

代码里的.append("path") created多了无效的created字符串，属于语法错误，会干扰后续代码执行。

核心问题3：未通过比例尺映射坐标 #

分组内路径的x/y访问器直接返回原始数据d.Time和d.soc，没有用x()和yleft()比例尺转换为SVG可视区域的坐标，就算生成了d属性，也大概率不在可视范围内。

修复后的代码 #

// 修复后可正常显示在分组g中的曲线
g.append("g")
  .append("path") // 直接添加单个path，无需selectAll+enter逻辑
  .datum(data)
  .attr("fill", "none") // 必须添加，否则路径会被填充为色块
  .attr("stroke", "#60105d")
  .attr("stroke-width", 1.5)
  .attr("d", d3.line()
    .x(function(d) { return x(d.Time); }) // 用比例尺转换x坐标
    .y(function(d) { return yleft(d.soc); }) // 用比例尺转换y坐标
    .curve(d3.curveBasis)
  );

额外说明 #

矩形能用.data(data)是因为每个数据元素对应一个独立矩形，和折线图“单路径对应整个数组”的逻辑完全不同。你在开发者工具里看到的多个空path，就是.data(data)给每个数据项都生成了一个path，但每个path都没有有效的d值。

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