如何在D3中根据内部HTML从同class的多个div中选中目标div

我来帮你搞定这个问题！你用D3生成年份按钮后没法直接通过年份选中修改样式，大概率是因为生成的按钮没有和年份对应的专属标识，或者选择的方式不够精准。下面给你两种靠谱的解决方案：

第一步：优化按钮生成代码（可选但推荐） #

先给每个生成的按钮添加上年份对应的数据属性，这会让后续的选择操作变得非常直观：

var years = [1975, 1976, /* ... 中间年份 ... */ ,2016];
var buttons = d3.select("body")
 .append("div")
 .attr("class", "years_buttons")
 .selectAll("div")
 .data(years)
 .enter()
 .append("div")
 .attr("data-year", function(d) { return d; }) // 新增这行，给每个按钮标记年份
 .text(function(d) { return d; });

第二步：选中指定年份的按钮并修改样式 #

方式一：通过数据属性精准定位 #

利用刚才添加的data-year属性，直接定位到目标年份的按钮，修改样式：

// 举个例子：选中1995年的按钮并修改样式
d3.select("[data-year='1995']")
  .style("background-color", "#2196F3") // 改成蓝色背景
  .style("color", "#ffffff") // 白色文字
  .style("padding", "5px 10px")
  .style("border-radius", "4px")
  .style("cursor", "pointer"); // 鼠标悬停变指针

方式二：通过绑定的数据筛选（无需额外加属性） #

如果不想加数据属性，也可以直接利用D3的数据绑定特性，通过原始年份数据筛选元素：

// 筛选出绑定数据为2000年的按钮
d3.selectAll(".years_buttons div")
  .filter(function(d) {
    return d === 2000; // 直接匹配绑定的年份数值
  })
  .style("background-color", "#F44336") // 红色背景
  .style("color", "#ffffff");

为什么之前的代码可能失效？ #

你之前尝试的代码没生效，可能是这几个原因：

• 没有限定选择范围：比如直接选div会选中页面上所有div，而不是.years_buttons下的按钮
• 用文本内容选择不可靠：比如div:contains('1995')这种方式，一旦文本有空格或者格式变化就会失效
• 没有利用D3的数据绑定：直接用DOM选择器不如基于绑定数据的筛选精准

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