存储包含转换的输入选择时出现问题

Question

如果我尝试存储以下输入选择，我在尝试访问它时遇到错误。如果我删除过渡，我没有问题。为什么？存储选择是否有其他限制？这是一个例子：

// this works
var enterSel = d3.select("svg")
  .selectAll("circle")
  .data([100, 200, 300])
  .enter()
  .append("circle")
    .attr("cx", d => d)
    .attr("cy", "100")
    .attr("fill", "red")
    .attr("r", "0")
    .transition()
    .duration(2000)
    .attr("r", "50");

如预期的那样，上面添加了三个圆圈并将其转换为红色，但是 enterSel 变量不能用于进一步修改：

// this doesn't work
enterSel.attr("fill", "green");

Uncaught Error: transition not found       d3.v4.min.js:2 
  at zn (d3.v4.min.js:2)
  at Cn (d3.v4.min.js:2)
  at SVGCircleElement.<anonymous> (d3.v4.min.js:2)
  at qn.each (d3.v4.min.js:2)
  at qn.tween (d3.v4.min.js:2)
  at qn.attrTween (d3.v4.min.js:2)
  at qn.attr (d3.v4.min.js:2)
  at <anonymous>:1:10

我可以通过单独进行转换来解决这个问题，如下所示，但我真的很想了解为什么这是必要的。

// this works
var enterSel = d3.select("svg")
  .selectAll("circle")
  .data([100, 200, 300])
  .enter()
  .append("circle")
    .attr("cx", d => d)
    .attr("cy", "100")
    .attr("fill", "red")
    .attr("r", "0");

enterSel.transition()
    .duration(2000)
    .attr("r", "50");

enterSel.attr("fill", "green");

Answer 1

我会 post 为将来的答案。带有 d3.transition.prototype.

的 d3 selection returns a selection with the d3.selection.prototype. A transition on the other hand returns a transition

var enterSel = d3.select("svg")
  .selectAll("circle")
  .data([100, 200, 300])
  .enter()
  .append("circle")
    .attr("cx", d => d)
    .attr("cy", "100")
    .attr("fill", "red")
    .attr("r", "0")
    .transition()
    .duration(2000)
    .attr("r", "50");

enterSel.attr("fill", "green");

不起作用，因为 enterSel 现在是过渡并且具有与选择不同的属性。

var enterSel = d3.select("svg")
  .selectAll("circle")
  .data([100, 200, 300])
  .enter()
  .append("circle")
    .attr("cx", d => d)
    .attr("cy", "100")
    .attr("fill", "red")
    .attr("r", "0");

enterSel.transition()
    .duration(2000)
    .attr("r", "50");

enterSel.attr("fill", "green");

这个之所以有效，是因为 enterSel 始终是一个选择，它使用选择原型。过渡在第二次调用中被分割开，但 enterSel 始终是所有圆圈的选择。

希望这有助于解决问题！[=18=]

存储包含转换的输入选择时出现问题

Trouble with storing enter selections containing transitions

selection

transitions

d3.js