D3.js中selection.style和selection.attr有什麼區別？

Question

我發現在我的測試二者的工作原理：

.on("mouseover", 
     function() { 
      d3.select(this) 
       .select("text") 
       .style("fill","red"); 
     }) 

或

.on("mouseover", 
     function() { 
      d3.select(this) 
       .select("text") 
       .attr("fill","red"); 
     }) 

Answer 1

如果你看一下你得到的HTML，你會看到類似這樣的：

<text style="fill: red">... 

和

<text fill="red">... 

..它們在SVG中都是合法的，但是當你需要風格時使用attr可能會讓你失望，如果你將它用於別的東西。

Answer 2

它略微取決於您在d3中製作的svg對象。

例如，當您想要製作圓形元素時，它將具有定義圓形元素的形狀和位置的'x'，'y'和'r'屬性（attr）。您可以使用不透明度，填充顏色等來設置圓的樣式。

屬性通常表示svg對象的大小和形狀，而樣式通常表示您在可視化中使用的svg對象的更多設計方面。