javascript - 为什么在 enter 上分离 d3 方法链会改变结果？

Question

我正在学习 D3.js 并且对方法的链接很好奇

这个脚本有效:

var data = [32, 57, 112, 250]

var svg = d3.select("svg")

svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cy", 60)
    .attr("cx", function(d, i) { return i * 100 + 30 })
    .attr("r", function(d) { return Math.sqrt(d); })

但是这个脚本没有任何结果:

var data = [32, 57, 112, 250]

var circles = d3.select("svg").selectAll("circle");
circles.data(data);

var circlesEnter = circles
    .enter()
    .append("circle")
    .attr("cy", 60)
    .attr("cx", function(d, i) { return i * 100 + 30})
    .attr("r", function (d) { return Math.sqrt(d)})

我看不到这两种不同方法的不同效果。谁能告诉我它们之间的区别？

提前致谢!

Answer 1

问题是 selection.data()不修改现有的选择，它返回一个新的选择:

[selection.data] Binds the specified array of data with the selected elements, returning a new selection that represents the update selection: the elements successfully bound to data. Also defines the enter and exit selections on the returned selection, which can be used to add or remove elements to correspond to the new data. (from the docs)

此外，

Selections are immutable. All selection methods that affect which elements are selected (or their order) return a new selection rather than modifying the current selection. However, note that elements are necessarily mutable, as selections drive transformations of the document! (link)

---

原样，circles包含一个空的圆圈选择(大小:0)，没有关联的数据数组。因为它是不可变的，调用circles.data(data)不会更改该选择，并且 circles.enter()将保持为空。同时由 circles.data() 创建的选择丢失，因为它没有分配给变量。

我们可以像在您的第一个代码块中那样将方法链接在一起，因为链中返回的选择是使用 .data() 时的新选择。 , .enter() , 或 selectAll() .方法链中的每个方法都使用前一行返回的选择，这是正确的选择。

为了破解.data()从链中，我们需要使用 selection.data() 创建一个新的中间选择来访问输入选择:

var circles = d3.select("svg").selectAll("circle");   

var circlesData = circles.data(data);

var circlesEnter = circlesData
  .enter()
  ...

var data = [32, 57, 112, 250]

var circles = d3.select("svg").selectAll("circle");

var circlesData = circles.data(data);

var circlesEnter = circlesData
    .enter()
    .append("circle")
    .attr("cy", 60)
    .attr("cx", function(d, i) { return i * 100 + 30})
    .attr("r", function (d) { return Math.sqrt(d)})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

但这种方法有点奇怪。