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