附加标签未出现在图表中 d3.js

Question

这是我遇到问题的部分代码：

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

这是 Chart class 的一部分。当我 console.log sec 时，我得到一个有 4 个组的选择对象，其中 2 个是空的（另外两个是我的轴对象）。我的图表看起来很好，并且在制作图表后调用了 addLabels()，并且线元素被正确 classed。如果问题不明显并且您想要其余代码，我很乐意将其粘贴 - 谢谢。

编辑：我认为问题可能出在第四行 (enter().append("g") 所以我改用了 join("g") 。这是我收到的错误：

d3.v6.js:1712 Uncaught (in promise) TypeError: node.compareDocumentPosition is not a function
    at Selection.selection_order [as order] (d3.v6.js:1712)
    at Selection.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)

也许这会提供进一步的见解。

Answer 1

固定：

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

附加标签未出现在图表中 d3.js

Appended labels not appearing in chart d3.js

javascript

d3.js