D3 path line is 0x0 size (no "d" attr is being added)

Question

I was wondering why this D3 code just does not work:

        ...
        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);

The console.log() line just shows data in apparently correct way:

[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)

... And all margin.*, xScale and yScale1 axes are correctly defined (or I think so) because they are correctly rendered.

The problem is that it generates all 308 paths with all attributes, EXCEPT the d one, and then the path results in 0x0 size:

No JS console errors.

Any ideas? Thanks in advance.

user_5768908 · Answer

The data() method binds one array element to one DOM element. That said, you don't want 308 paths, you want just one path with 308 data points. Therefore, wrap everything in an outer array, witch has just one element:

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

D3 path line is 0x0 size (no "d" attr is being added)

1 Answers