Какая разница между selection.style и selection.attr в D3.js?

Я обнаружил, что оба они работают в моем тесте:

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

или

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

Ответы

Ответ 1

Если вы посмотрите на HTML, который вы получите, вы увидите что-то вроде:

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

и

<text fill="red">...

.., которые являются законными в SVG, но с использованием attr, когда вам нужен стиль, вы можете покончить с собой, если используете его для чего-то другого.

Ответ 2

Это немного зависит от объекта svg, который вы делаете в d3.

Если вы хотите, например, создать элемент окружности, он будет иметь атрибут 'x', 'y' и 'r' (attr), которые определяют форму и местоположение элемента окружности. Вы можете создать круг с такими вещами, как непрозрачность, цвет заливки и т.д.

Атрибуты обычно обозначают размер и форму объекта svg, тогда как стиль обычно указывает на более конструктивные аспекты объектов svg, которые вы используете в своей визуализации.