d3js plotting linecharts undefined is not iterable - d3.js

Question

I'm learning d3js and I need help in creating line charts. I'm fairly successful plotting simple objects and bar charts. Line charts seems to be a steep hill to climb.
const data = [{
"LINE1": [
10,
11,
12,
15
]
},
{
"LINE2": [
21,
22,
23,
32
]
},
{
"LINE3": [
11,
12,
13,
15
]
}
]
// set the dimensions and margins of the graph
var margin = {
top: 50,
right: 100,
bottom: 130,
left: 120
},
width = 900 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#ca")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
// Add X axis
var x = d3.scaleLinear()
.domain(d3.extent(data, (d) => d.length))
.range([0, width]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(5));
// Add Y axis
// I need help in this area, how can I get the min and max values set in the domain?
var y = d3.scaleLinear()
.domain([0, d3.max(data, (d) => d.values)])
.range([height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
// Draw the line
// I need help in this area, how can I get the lines plotted, js gives error in this!
svg.selectAll(".line")
.data(data)
.enter()
.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1.5)
.attr("d", (d) => {
console.log(d)
var k = d3.line()
.x((d) => x(d))
.y((d) => y(d))
(d.values);
console.log(k);
return k;
});
<div id="ca">
</div>
<script src="https://d3js.org/d3.v6.min.js"></script>
How can I get the line charts plotted with data format I have?

Answer 1

I've made your example work, but there are several things you need to know here:
Your data structure was very chaotic. If you want to have an array of objects as data, make sure all objects have the same keys. It's fine if you use [{y: [...]}, {y: [...]}], but [{LINE1: [...]}, {LINE2: [...]}] is very difficult to work with. I changed your data to be more like [[...], [...], [...]] as a structure.
Don't create a separate d3.line for every line, just create it once and call it. It's a line factory, which means it is a function that, when called, returns a line. If it's not shared, it might use different domains and ranges, making the chart difficult or even useless.
If the first argument in a function is d, the second is i, the index of the node in the array. In this case, you use that to start at x=0, and go to x=3. You used d to try to get that value.
Keep in mind the structure of your data. You kept wanting to access d.values, but that never existed!
const data = Object.values({
"LINE1": [
10,
11,
12,
15
],
"LINE2": [
21,
22,
23,
32
],
"LINE3": [
11,
12,
13,
15
]
});
var line = d3.line()
.x((d, i) => x(i))
.y((d) => y(d));
// set the dimensions and margins of the graph
var margin = {
top: 50,
right: 100,
bottom: 130,
left: 120
},
width = 900 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#ca")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
// Add X axis
var x = d3.scaleLinear()
.domain([0, d3.max(data, (d) => d.length)])
.range([0, width]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(5));
// Add Y axis
// I need help in this area, how can I get the min and max values set in the domain?
var y = d3.scaleLinear()
.domain([0, d3.max(data, (d) => Math.max(...d))])
.range([height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
// Draw the line
// I need help in this area, how can I get the lines plotted, js gives error in this!
svg.selectAll(".line")
.data(data)
.enter()
.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1.5)
.attr("d", (d) => line(d));
<div id="ca">
</div>
<script src="https://d3js.org/d3.v6.min.js"></script>