附加标签未出现在图表 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类的一部分。 当我console.log sec ，我得到一个包含 4 个组的选择对象，其中 2 个是空的（另外两个是我的轴对象）。 我的图形看起来很好，并且在创建图形后调用了 addLabels()，并且线元素被正确分类。 如果问题不明显，并且您想要其余的代码，我很乐意将其粘贴进去 - 谢谢。

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

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)

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

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