D3.js初用：如何通过元素某属性值获取另一属性值

嘿，刚接触D3.js的话，这种通过一个属性定位元素再拿另一个属性的需求太常见啦，我给你分享几种实用的方式：

1. 用D3选择器精准定位元素后获取属性 #

假设你要找data-r属性值等于变量i的<rect>元素，然后获取它的data-value或者其他属性，可以这么写：

// 第一步：用属性选择器选中目标元素
const targetRect = d3.select(`rect[data-r="${i}"]`);

// 方法A：用D3的attr()方法获取属性
const dataValue = targetRect.attr("data-value");
const fillColor = targetRect.attr("fill");

// 方法B：转成原生DOM元素后用dataset访问data-*属性（更规范）
const nativeElement = targetRect.node();
const dataR = nativeElement.dataset.r; // 对应data-r属性
const dataC = nativeElement.dataset.c; // 对应data-c属性

注意：d3.select()只会返回匹配到的第一个元素，如果要选中所有符合条件的元素，改用d3.selectAll()就行。

2. 遍历多个匹配元素并获取属性 #

如果有多个<rect>的data-r等于i，可以用each()方法遍历处理：

d3.selectAll(`rect[data-r="${i}"]`).each(function() {
  // 这里的this是当前遍历到的原生DOM元素
  const currentRect = d3.select(this);
  const value = parseFloat(currentRect.attr("data-value")); // 转成数字类型
  const colIndex = parseInt(this.dataset.c);
  
  console.log(`这个单元格的数值是${value}，列索引是${colIndex}`);
});

3. 已知元素引用时直接获取属性 #

如果你已经通过其他方式拿到了元素的D3选择集（比如通过类名选中.cr0.cc0），直接调用attr()就行：

const specificRect = d3.select(".cr0.cc0");
const rectWidth = specificRect.attr("width");
const dataValue = specificRect.attr("data-value");

小提醒：从属性拿到的值默认是字符串类型，如果需要数字的话，记得用parseFloat()或parseInt()转换哦～

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