javascript - 如何在 d3 中选择具有特定属性值的元素

我正在浏览器上使用 d3 绘制项目。我想根据它们的属性突出显示其中的一些。例如，我有杂货、肥皂，其中肥皂元素的类型为 [for_bath (OR) for_cloth_wash] 。我想在所有肥皂和杂货中选择特定于 for_bath 的元素，这些元素在同一屏幕上组合并绘制在一起。

如何 ？

另外，我的另一个疑问是 document.getElementById() 在 d3 的选择代码中不起作用。我是真的还是疏忽了？

编辑

var data = {"soaps":{"lux":"bath", "cinthol":"bath", "rin","cloth_washing"},
            "shoes":{"valentine":"teens", "bootie":"kids", "kuuch":"kids"}};

//  Now I want to show all bath soaps highlighted, may be with a circle around them.
var svg = d3.select("svg")
            .selectAll(".items")
            .data(data).enter()
            .append("circle")
            //  highlighting styles
;

在这里，我想选择沐浴皂并对其进行汇总。

最佳答案

你没有给我们任何代码，所以我要在这里猜测。您可能正在寻找的是 CSS attribute selectors 。因此，如果您想选择属性 soap 设置为 for_bath 的元素，您可以这样做

d3.selectAll("[soap=for_bath]");

这仅适用于 DOM 元素。如果您在谈论数据元素，那么您可以使用 .filter() method :

data.filter(function(d) { return d.soap == "for_bath"; });

关于你的第二个问题，我不确定你的意思。 d3.select() 或 d3.selectAll() 的参数是 DOM 选择器，所以 document.getElementById() 在这里没有意义。但是，您当然可以使用它的其他功能:

d3.selectAll("something").each(function() {
  d3.select(this); // the current element
  document.getElementById("something"); // another element
});

关于javascript - 如何在 d3 中选择具有特定属性值的元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20273097/