svg - D3 路径线大小为 0x0(未添加 "d"属性)

Question

我想知道为什么这个 D3 代码不起作用:

        ...
        console.log(data["SAT"]);

        /************* Generic line definition ************/
        var line = d3.line()
            .x(d => xScale(d.x))
            .y(d => yScale1(d.y));

        /******************* SAT line *****************/
        var SATPath = svg.append("g")
            .attr("class", "SAT-curve")
            .selectAll("path")
            .data(data["SAT"])
            .enter().append('path')
            .attr("fill", "none")
            .attr("stroke-width", 1.5)
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            .attr("d", d => line(d))
            .attr("stroke", colors.purple);

console.log() 行以明显正确的方式显示数据:

[0 … 99]
0: {x: 0.0011, y: 178.75}
1: {x: 0.0011, y: 180.75}
...
94: {x: 0.0014, y: 366.75}
95: {x: 0.0014, y: 368.75}
96: {x: 0.0014, y: 370.75}
97: {x: 0.0014, y: 372.75}
98: {x: 0.0014, y: 374.75}
99: {x: 0.0015, y: 376.75}
[100 … 199]
[200 … 299]
[300 … 307]
length: 308
[[Prototype]]: Array(0)

... 并且所有 margin.*、xScale 和 yScale1 轴都已正确定义(或者我认为如此)，因为它们是正确的渲染。

问题是它生成了所有 308 个具有所有属性的路径，EXCEPT d 一个，然后路径结果为 0x0 大小:

<g class="SAT-curve">
    <path fill="none" stroke-width="1.5" transform="translate(50,30)" stroke="#8e69b3"></path>
    <path fill="none" stroke-width="1.5" transform="translate(50,30)" stroke="#8e69b3"></path>
    <path fill="none" stroke-width="1.5" transform="translate(50,30)" stroke="#8e69b3"></path>
    <path fill="none" stroke-width="1.5" transform="translate(50,30)" stroke="#8e69b3"></path>
    ....
    <path fill="none" stroke-width="1.5" transform="translate(50,30)" stroke="#8e69b3"></path> 
</g>

没有 JS 控制台错误。

有什么想法吗？提前致谢。

Answer 1

data() 方法将一个数组元素绑定(bind)到一个 DOM 元素。也就是说，您不需要 308 条路径，您只需要一条包含 308 个数据点的路径。因此，将所有内容都包装在一个外部数组中，女巫只有一个元素:

.data([data["SAT"]])