Javascript D3.js中的样式和属性

我是D3.js的新手，并遵循以下规则

我不明白为什么圆圈。样式（“填充”、“钢蓝”）以下内容不生效；但是，如果将样式行放在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>

//js
var svg=d3.选择（“svg”）；
var circle=svg.selectAll（“circle”）.data（[32,57,112,293]，函数（d）{return d；}）；
圆形样式（“填充”、“钢蓝色”）；
circle.enter（）.append（“circle”）
.attr（“cy”，60）
.attr（“cx”，函数（d，i）{返回i*100+30；}）
.attr（“r”，函数（d）{return Math.sqrt（d）；}）；
circle.exit（）.remove（）；
//html

---

谢谢

第一次运行代码时，圆选择的大小为零，因为没有与键匹配的元素。所有圆元素都将放入退出选择中。

data

方法返回更新选择，该选择最初为空，它的（第二维度）长度等于传递给

.data

的第一个参数的第一维度的长度，但选择的每个元素都是

null

。直到执行enter方法，才会创建新节点，并合并enter和update选择

如果代码再次运行，例如用一个新值替换一个数据元素，那么三个匹配的节点将被放置在更新选择中，并由

.data

返回。不匹配的将放在退出选择中，其在更新选择中的旧位置将设置为null。一个附加了新数据元素的占位符对象将被放置在输入选择中，该选择将在

.append

之后引用新创建的节点，并通过

将其合并到更新选择中。输入

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

但是，如果随后再次调用代码，并且更改了数据元素的顺序（仍然具有相同的值集，但都位于数组中的不同位置），则退出和输入选择将为空，但绑定到所有节点的数据值将更改。如果在这种情况下使用密钥，则不会更改任何内容
 我明白了，谢谢！！请补充问题：在调试时，我注意到在输入选择后，它在前三个圆圈仍然存在的情况下又画了四个圆圈，然后删除方法删除了前三个圆圈。因此，使用selectAll（）.data（），它实际上是用占位符重新绘制圆，而不是编辑现有的选定圆？是吗？@omic I进一步扩展了。。。我想我已经做完了。