d3.js绘制图表时追加的标签不显示，附代码与报错信息求助

核心问题1：数据绑定的选择器不匹配 #

你当前代码第一行用this.plot.selectAll(".line")绑定this.keymap数据，但.line是折线元素的类名，和你后续要创建的类名为stock的分组完全不匹配，导致现有DOM中不对应数据的元素（比如你打印出来的坐标轴对象）也被混入了选择集，enter环节生成的节点自然不符合预期。

核心问题2：transform属性回调语法错误 #

你写的transform回调用了花括号包裹逻辑，但没有加return语句，最终返回值为undefined，文本元素没有被定位到可视区域，自然看不到。

核心问题3：join方法使用场景错误 #

join()方法需要作用在完整的update选择集上（也就是selectAll之后直接调用，用来统一处理update/enter/exit三种状态的节点），你之前是在enter().append()返回的仅包含enter状态的选择集上调用join，自然会触发节点类型相关的报错。

修正后的代码 #

addLabels(){
    // 选择器要和后续创建的元素类名匹配，没有对应元素的话会返回空选择集，enter环节正常生成新节点
    let sec = this.plot.selectAll(".stock")
                  .data(this.keymap);
    // 直接在update选择集上调用join创建g元素
    sec.join("g")
       .attr("class", "stock")
       // 直接在g元素下追加text，不需要再调用join
       .append("text")
       .datum(d => ({
           name: d.name,
           value: d.values[d.values.length-1]
       }))
       // 去掉多余花括号，或者加return
       .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;
       });
}

额外验证点 #

如果修改后仍然不显示，可以按以下步骤排查：

• 打印d.value.date和d.value.key，确认数值在xScale、yScale的输入域范围内，转换后坐标没有超出SVG画布可视区域
• 检查CSS是否有针对.stock text的隐藏样式，比如opacity设为0或者display:none

内容的提问来源于stack exchange，提问作者Bigboss01