style and attr in D3.js

本文关键字：D3 js in attr and style 更新时间：2023-09-26

我是D3.js新手，遵循教程。

我很困惑为什么圈。style("fill"， "steelblue");不生效;但是如果把样式线放在circle.enter().append("circle")行之后，它可以为所有的圆圈填充颜色。根据我的理解，样式是全局的，应该应用于所有的圆圈，或者至少在下面的代码中影响html中现有的圆圈。

//js
var svg = d3.select("svg");
var circle = svg.selectAll("circle").data([32, 57, 112, 293], function(d) { return d; });
circle.style("fill", "steelblue");
circle.enter().append("circle")
    .attr("cy", 60)
    .attr("cx", function(d, i) { return i * 100 + 30; })
    .attr("r", function(d) { return Math.sqrt(d); });
circle.exit().remove();

//html
<svg width="720" height="120">
<circle cx="40" cy="60" r="10"></circle>
<circle cx="80" cy="60" r="10"></circle>
<circle cx="120" cy="60" r="10"></circle>
</svg>

谢谢!

代码第一次运行时，圆圈选择的大小为零，因为没有与键匹配的元素。所有的圆元素都将被放置在退出选区中。data方法返回最初为空的更新选择，它的(第二次元)长度等于传递给.data的第一个参数的第一次元的长度，但是选择的每个元素都是null。直到执行enter方法，才会创建新节点，并合并enter和更新选择。

如果代码再次运行，例如用一个新值替换一个数据元素，那么三个匹配的节点将被放置在更新选择中，并且将由.data返回。不匹配的那个将被放在退出选择中，它在更新选择中的旧位置将被设置为null。一个带有新数据元素的占位符对象将被放置在输入选择中，该选择将以对.append之后新创建的节点的引用结束，并将由.enter合并到更新选择中。

如果您不使用键函数，那么，第一次，三个现有节点将与一个空值一起出现在更新选择中，并且一个占位符将放置在带有附加数据的输入选择中(在本例中为293)。退出选择将为空(长度为0)，将创建一个新节点并将其添加到输入选择中，并将新数据元素绑定到该节点上。此时，更新选择(circle)将与输入选择合并。它的空条目已经被绑定了新数据的新节点所替换。这是调用.enter的副作用。

但是，如果您随后再次调用代码，并且更改了数据元素的顺序(仍然使用相同的一组值，但在数组中的位置不同)，那么exit和enter选项将为空，但是绑定到所有节点的数据值将被更改。如果在这种情况下使用密钥，则不会改变任何内容。