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

我会发布未来的答案。带有d3.selection.prototype的d3 https://en.wikipedia.org/wiki/Most_vexing_parse。另一方面selection returns a selection与d3.transition.prototype的转换。

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始终是所有圈子的选择。

希望这有助于清理事情！

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

1 个答案: