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");
        })

- Hanfei Sun

Answer 1

如果你查看获取到的HTML代码，你会看到类似如下内容：

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

和

<text fill="red">...

在SVG中，使用attr和style都是合法的，但如果你需要样式却使用attr可能会让你在其他方面出现问题。

- Andrew

---

CSS可以覆盖attr，但无法覆盖style。这是让我感到困惑的原因。 - hobbes3

Answer 2

它稍微取决于您在d3中创建的svg对象。

例如，当您要创建一个圆形元素时，它将具有“x”，“y”和“r”属性（attr），这些属性定义了圆形元素的形状和位置。您可以使用透明度、填充颜色等来样式化圆形。

属性通常表示svg对象的大小和形状，而样式通常指示您在可视化中使用的svg对象的更多设计方面。

- cantdutchthis