D3.js路径缺失d属性、尺寸为0x0问题求助

• 你当前代码用.data(data["SAT"])直接绑定数组，导致D3为数组里每一个{x,y}对象都创建了一个<path>（也就是308个空path）。
• D3的line()生成器要求传入完整的点数组才能生成路径字符串，但你在.attr("d", d => line(d))里给生成器传的是单个对象，不是数组，自然生成不了有效的d属性。

只需要把数据改成数组包裹的形式，让D3只创建一个path，再把完整数组传给line生成器：

var SATPath = svg.append("g")
    .attr("class", "SAT-curve")
    .selectAll("path")
    // 把目标数组包装成单元素数组，确保只生成一个path
    .data([data["SAT"]])
    .enter().append('path')
    .attr("fill", "none")
    .attr("stroke-width", 1.5)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    // 直接传入完整数组给line生成器，无需额外箭头函数
    .attr("d", line)
    .attr("stroke", colors.purple);

• 单个{x,y}对象无法生成路径，所以原来的308个path都没有d属性，尺寸为0x0。
• 用[data["SAT"]]绑定数据后，enter阶段只会创建一个path元素，line生成器拿到完整的点集合，就能输出正确的路径指令。

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