如何挑選具有特定屬性值的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 
});