Here's the bit of code I'm having trouble with:
addLabels(){
let sec = this.plot.selectAll(".line")
.data(this.keymap)
.enter().append("g")
.attr("class", "stock");
sec.join("text")
.datum(d => ({
name: d.name,
value: d.values[d.values.length-1]
}))
.attr("transform", d => {"translate(" + this.xScale(d.value.date) + "," + this.yScale(d.value.key) + ")"}
)
.attr("x", 7)
.attr("dy", ".3em")
.style("fill", "black")
.style('font-family', 'Helvetica')
.style('font-size', '11px')
.style('letter-spacing', '1px')
.style('text-transform', 'uppercase')
.text(function(d){
return d.name;
});
}
This is part of a Chart class. When I console.log sec, I get a selection object with 4 groups, 2 of which are empty (the other two are my axis objects). My graph appears fine and addLabels() is called after the graph is made, and the line elements are classed correctly. If the issue is not apparent and you'd like the rest of the code, I'm happy to paste it in- Thank you.
Edit:
I thought perhaps the issue might be in the fourth line (enter().append("g") so I used join("g") instead. This is the error I received:
d3.v6.js:1712 Uncaught (in promise) TypeError: node.compareDocumentPosition is not a function
at Selection$1.selection_order [as order] (d3.v6.js:1712)
at Selection$1.selection_join [as join] (d3.v6.js:1686)
at Chart.addLabels (chart.js:122)
at Chart.draw (chart.js:31)
at Chart.setData (chart.js:160)
at init (plot.js:4)
Maybe this will provide further insight.
Fixed:
let sec = this.plot.selectAll(".line")
.data(this.keymap)
.enter().append("g")
.attr("class", "stock");
sec.append("text") //literally just append instead of join lol
.datum(d => ({
name: d.name,
value: d.values[d.values.length-1]
}))
.attr("transform", d => "translate(" + this.xScale(d.value.date)
+ "," + this.yScale(d.value.key)
+ ")"
)
.attr("x", 7)
.attr("dy", ".3em")
.style("fill", "black")
.style('font-family', 'Helvetica')
.style('font-size', '11px')
.style('letter-spacing', '1px')
.style('text-transform', 'uppercase')
.text(function(d){
return d.name;
});