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

Question

我正在浏览器上使用 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
;

在这里，我想选择沐浴皂并将其四舍五入。

Answer 1

您还没有给我们任何代码，所以我将在这里猜测。您可能正在寻找的是 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
});