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对象的更多设计方面。