Aquí está el fragmento de código con el que tengo problemas:
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; }); } Esto es parte de una clase Chart . Cuando hago console.log sec , obtengo un objeto de selección con 4 grupos, 2 de los cuales están vacíos (los otros dos son mis objetos de eje). Mi gráfico parece estar bien y se llama a addLabels() después de que se crea el gráfico, y los elementos de línea se clasifican correctamente. Si el problema no es evidente y desea el resto del código, con gusto lo pegaré. Gracias.
Editar: pensé que tal vez el problema podría estar en la cuarta línea (enter().append("g") , así que usé join("g") en su lugar. Este es el error que recibí:
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)Tal vez esto proporcione más información.
Fijado:
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; });