D3.js如何将股票代码标签绑定到折线末端随位置动态变化

问题根因 #

你当前遇到的核心问题是选择器类名冲突导致标签元素的enter selection为空，所以位置计算的回调函数从未执行：

• 你先给折线path设置了.stock类名
• 后续d3.selectAll(".stock")会选中所有已经存在的折线元素，当你传入新的kvals数据时，若已有.stock元素的数量和kvals长度匹配，enter selection就会是空的，所以内部transform的回调、console.log都不会触发

修复方案 #

第一步：区分折线和标签的类名 #

修改折线的类名，避免和后续标签分组的选择器冲突：

var svg = d3.select('#graph')
  .append('svg')
  .attr('width', w)
  .attr('height', h);

svg.append('path')
  .datum(data)
  .attr('class', 'stock-line') // 将原stock类名替换为stock-line
  .attr('stroke', '#157145') 
  // 其余折线原有配置保持不变

第二步：调整标签的数据绑定逻辑 #

直接基于svg容器创建标签分组，不要选中已有的折线元素：

var sec = d3.select("svg").selectAll(".stock-label-group")
  .data(kvals) // 数据格式保持和之前一致即可
  .enter().append("g")
  .attr("class", "stock-label-group");

sec.append("text")
  .datum(function(d){
    return {
      name: d.name,
      value: d.values[d.values.length-1]
    };
  })
  .attr("transform", function(d){
    console.log(xScale(d.value.date)); // 此时控制台会正常输出值
    return "translate(" + xScale(d.value.date) + "," + yScale(d.value.stock) +")"
  })
  .attr("x", 3)
  .attr("dy", ".35em")
  .text(function(d){
    return d.name;
  });

额外注意事项 #

• 如果你是多支股票的折线场景，所有折线都统一使用stock-line类名，且kvals的排列顺序和折线数据的顺序保持一致，标签位置才能和折线一一对应
• 后续数据更新需要刷新标签位置时，只需要选中.stock-label-group下的text元素，重新计算并赋值transform属性即可实现跟随折线末端移动的效果

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