如何访问D3创建的SVG元素属性？D3绘制柱状图获取矩形属性报错问询

报错原因 #

• 核心原因是d3.select('#labrador')没有匹配到任何DOM元素，返回了空选择集，调用attr()时触发了报错，常见触发场景有三个：
  1. 执行select的时机早于rect元素被插入DOM的时机，比如查询代码写在了rect生成逻辑之前，或者和异步数据加载的时序冲突
  2. dogs数组中不存在name为labrador的项，对应rect未被创建，或是name值包含空格、特殊字符不符合DOM id命名规则
  3. 你后续可用的实现用了类选择器.${d.name}，但你给rect设置的是id属性，选择器不匹配也是你之前用id选不到的可能原因之一

正确访问D3创建元素属性的方法 #

方案1：优先复用计算逻辑（最推荐，符合D3数据驱动的设计思路） #

你绘制rect的坐标完全通过数据和索引计算得到，绘制圆点时不需要额外查询DOM，直接复用相同的计算逻辑即可，性能更高，写法更简洁：

weightDots.enter().append('circle')
  // 复用rect的x坐标计算规则，加20（柱宽的一半）得到柱形水平中心
  .attr('cx' , (d,i) => 60 * i + 20 )
  // cy可根据需求调整，要放在柱顶就用身高的标尺计算，要对应体重就用你定义的yW标尺
  .attr('cy' , d => 500 - y(d.height) - 10 )
  .attr('r' , 10)
  .attr('fill' , d => d.color)

方案2：通过持有选择集访问属性 #

如果确实需要读取已生成元素的属性，可以在创建rect时把选择集存为变量，不需要全局查询DOM：

// 存储创建好的rect选择集
const rects = heightBars.enter().append('rect')
  .attr('width' , 40)
  .attr('height' , d => y(d.height))
  .attr('y' , d => 500 - y(d.height))
  .attr('x',  (d,i) => 60 * i)
  .attr('fill' , d => d.color)
  .attr('id', d => d.name)

// 直接通过选择集筛选元素读取属性
console.log(rects.filter(d => d.name === 'labrador').attr('y'))

方案3：全局查询DOM（不推荐） #

如果一定要用全局选择器查询，确保执行查询的时机在rect生成之后，同时选择器和属性匹配：

// 等rect全部插入DOM后执行，id选择器用#前缀
console.log(d3.select('#labrador').attr('y'))

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