Javascript QuerySelector是在多个图表中选择元素的好方法吗？

我想在多个图表中突出显示来自同一维度（本例中为国家）的元素。在生成

rect

或

circle

时为每个国家/地区分配一个类，然后使用

querySeletorAll

查找所有匹配的元素似乎是可行的，但我想知道是否有更好的方法。这感觉有点不舒服

请看这个工作演示

条形图和散点图的元素（

rect

和

circle

）的分类方式相同：

var enter = svgContainer.selectAll('rect')
  .data(data)
  .enter().append('rect')
  .attr('class', function(d) { return "mycharts_bars_" + d.Country; })

然后鼠标悬停时的高亮显示会执行以下操作：

  .on("mouseover", function(d) { 

  var hover_value = this.__data__.Country; 
  var hover_elems = document.querySelectorAll(`[class*="${hover_value}"]`);

  for (let item of hover_elems) {
    item.setAttribute('fill', 'hotpink');}
    })

正如您在中看到的，

d3.selectAll

已在内部使用

文档。querySelectorAll

：

export default function(selector) {
  return typeof selector === "string"
      ? new Selection([document.querySelectorAll(selector)], [document.documentElement])
      : new Selection([selector == null ? [] : selector], root);
}

因此，您可以安全地使用

selectAll

，这使您的代码对于D3程序员来说更加地道

但是，您的代码中存在一些问题：

首先，您不需要

var hover\u value=this.\u数据\u.Country。您已经有了作为第一个参数的数据！因此，它可以是
d.Country

其次，如果不想处理类，不需要处理类，只需选择元素即可。如果愿意，您可以使用类，这不是一个大问题，但是对于循环的……您肯定不需要使用类。根据经验，不要在D3代码中使用循环（在某些特定情况下需要循环，但在本例中不需要）

综上所述，功能可以简单如下：

d3.selectAll("circle, rect").attr("fill", function(e) {
    return e.Country === d.Country ? "pink" : "grey"
});

或者，由于只有悬停在上方的矩形会改变颜色：

d3.select(this).attr("fill", "pink");
d3.selectAll("circle").attr("fill", function(e) {
    return e.Country === d.Country ? "pink" : "grey"
});

作为旁注，这将更改页面中的所有选定元素。我这样做只是因为，在你的例子中，你只有很少的元素。如果在真实图表中有数百个元素，则更好的解决方案是首先过滤它们，然后应用更改（在
mouseover
和
mouseout
上），这将提供更好的性能

下面是您的代码，其中有一个更改：
代码复查堆栈交换是一个更好的询问此问题的地方。因为你的代码至少在工作。我也曾经为类似的问题推荐CodeReview，但我收到了很多来自CR用户的投诉，这阻碍了此类迁移。所以，今天，我推荐CodeReview只针对非常具体的问题。谢谢你的指点。我没有想到把它发布在代码审查上，因为这是一个一般的设计模式问题（在单独的图表上突出显示），而代码只是用于说明，这会让人泄气。@gherka是的，你是对的，你的问题勾选了框2、3和4，但不是所有的框。。。这对CR来说是一个边缘问题。