Need help with D3.js line chart issue if anyone has any experience. Would be greatly appreciated!

Question

I have the following code, it seems a lot different to what I have found online when it comes to d3.js tutorials.

This code works for creating a bar chart. What I would like to do is add a line to the bar chart. I would like the line to visualize the same info as the bars do.

The code is as follows:
https://code.sololearn.com/WyyzomTqPwE2

The question can also be found:
https://stackoverflow.com/questions/72110102/issue-with-creating-line-chart-using-d3-js

Has anyone seen d3.js be used like this? How would you go about adding a line to this chart?

I want the line to be shown for the metric1 values.

I have tried to add :

svg.append("g")
.datum(newdataset)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.category) })
.y(function(d) { return y(d.value) })
)

But this doesnt do anything.

I have also tried the following:

let dataset = function (d){return subgroups.map(function (key) {return { key: key, value: d[key], category: d.category };});}

let line = d3.line()
.x(function(d) { return xSubgroup(d.key)})
.y(function(d) { return y(0) })

console.log("line()","",line(newdataset))
console.log("dataset","",dataset)
console.log("line()","",line(dataset(newdataset)))

svg.append("path")
.datum(dataset(newdataset))
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", line)

The result it a very small line in the graph and the following console logs:

line() MNaN,310LNaN,310LNaN,310LNaN,310LNaN,310LNaN,310LNaN,310LNaN,310LNaN,310LNaN,310LNaN,310

dataset ƒ (e){return subgroups.map(function(a){return{key:a,value:e[a],category:e.category}})}

line() M0.5923344947735192,310L12.439024390243903,310

Any idea what im doing wrong?

Thank you in advance

Answer 1

Take a look at this. What I make⤵️

https://sololearn.com/compiler-playground/W2x5kIQacu92/?ref=app