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

【问题标题】：Appended labels not appearing in chart d3.js附加标签未出现在图表 d3.js 中
【发布时间】：2021-12-02 05:39:20
【问题描述】：

这是我遇到问题的代码：

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.logsec 时，我得到一个包含 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)

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

【问题讨论】：

标签： javascript d3.js

【解决方案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;
                 });

【讨论】：