如何使用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
;

我想选择洗浴皂并将它们整理起来。

- Siva Tumma

Answer 1

您没有给我们任何代码，所以我猜测您可能正在寻找的是CSS属性选择器。因此，如果您想选择具有属性soap设置为for_bath的元素，则应执行以下操作。

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

这仅适用于DOM元素。如果您正在讨论数据元素，则可以使用.filter()方法：

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
});

- Lars Kotthoff

---

感谢您抽出时间。我将用一些代码来改进我的问题。 - Siva Tumma