qual è la differenza tra selection.style e selection.attr in D3.js?

Question

ho trovato sia di loro lavora nel mio test:

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

o

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

Answer 1

Se si guarda il codice HTML che si ottiene, vedrete qualcosa di simile:

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

e

<text fill="red">... 

.. che sono entrambi legali in SVG, ma usare attr quando hai bisogno di uno stile potrebbe farti inciampare se lo usi per qualcos'altro.

Answer 2

Dipende leggermente dall'oggetto svg creato in d3.

Quando si desidera creare un elemento cerchio per esempio, avrà un attributo 'x', 'y' e 'r' (attr) che definisce la forma e la posizione dell'elemento cerchio. Puoi modellare il cerchio con cose come opacità, colore di riempimento, ecc.

Gli attributi di solito denotano la dimensione e la forma di un oggetto svg mentre lo stile di solito indica aspetti più decorativi degli oggetti svg che utilizzi nella visualizzazione.