D3：如何通过D3中的内部html从多个具有相同类的div中选择div？

Question

我已经通过 D3 绘制了一系列 div 看起来像按钮，如下所示

我用过这段代码

var years = [1975, 1976,...... ,2016]
var buttons = d3.select("body")
                    .append("div")
                    .attr("class", "years_buttons")
                    .selectAll("div")
                    .data(years)
                    .enter()
                    .append("div")
                    .text(function(d) {
                        return d;
                    });

我想要实现的是选择任何按钮（无需通过使用年份名称作为唯一值的代码单击）来更改按钮的样式。我尝试了以下代码，但没有成功。

d3.select(".years_buttons")
  .selectAll("div")
  .filter(function(d){return d.innerText == '2002'})
  .attr('color','white')

任何人都可以帮助我，在此先感谢

Answer 1

在您的过滤器函数中，d 指的是数据，而不是元素。此外，.attr('color', 'white') 会将color="white" 指定为元素属性，而不是样式。您正在寻找.style()。为了正确过滤，在您的原始渲染中，您可以将数据分配为 id 和文本，然后使用它来选择您的目标元素：

var years = [1975, 1976, 2016]
var buttons = d3.select("body")
                    .append("div")
                    .attr("class", "years_buttons")
                    .selectAll("div")
                    .data(years)
                    .enter()
                    .append("div")
                    .attr('id', function(d) {
                        return 'id' + d;
                    })
                    .text(function(d) {
                        return d;
                    });
                    
d3.select('#id1975')
  .style('color', 'white')

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

请注意，我在数据前添加了字符串'id'：html ids 不应以数字开头，因此请务必添加一个字符串，该字符串与数据相结合，在页面上将是唯一的。