Jaka jest różnica między selection.style a selection.attr w D3.js?

Question

znalazłem obu z nich działa w moim teście:

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

lub

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

Answer 1

Jeśli spojrzeć na HTML można uzyskać, zobaczysz coś takiego:

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

i

<text fill="red">... 

.. które są zgodne z prawami w SVG, ale użycie atrita, gdy potrzebujesz stylu, może wywołać atak, jeśli użyjesz go do czegoś innego.

Answer 2

Zależy to nieco od obiektu svg, który tworzysz w d3.

Jeśli chcesz utworzyć element koła, na przykład, będzie on miał atrybuty "x", "y" i "r" (atr), które definiują kształt i położenie elementu koła. Kółko można wyposażyć w takie elementy, jak nieprzezroczystość, kolor wypełnienia itd.

Atrybuty zwykle oznaczają rozmiar i kształt obiektu svg, podczas gdy styl zazwyczaj wskazuje na bardziej wyrafinowane aspekty obiektów svg używanych w wizualizacji.