存储包含转换的输入选择时出现问题 [英] Trouble with storing enter selections containing transitions

问题描述

如果我尝试存储以下回车选择，尝试访问它时会出现错误。如果删除过渡，我没有问题。为什么？存储选择内容还有其他限制吗？下面是一个示例：

If I try to store the following enter selection, I get an error when I try to access it. I don't have a problem if I remove the transition. Why? Are there other restrictions on storing selections? Here is an example:

// 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 变量不能用于进一步修改：

The above appends and transitions three circles to red, as expected, but the enterSel variable cannot be used for further modifications:

// 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

我可以通过分别进行过渡来解决此问题，如下所示，但我真的很想知道为什么

I can get around this by doing the transition separately, as follows, but I really want to understand why this is necessary.

// 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");

推荐答案

我将发布未来的答案。 d3 选择返回具有 d3.selection.prototype <的选择 / code>。另一方面，转换使用 d3.transition返回转换。 .prototype 。

I'll post an answer for the future. A d3 selection returns a selection with the d3.selection.prototype. A transition on the other hand returns a transition with the 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 现在是过渡并且具有与选择不同的属性。

Does not work because enterSel is now a transition and has different properties than a selection.

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

This one works because enterSel is always a selection, which uses the selection prototype. The transition is sectioned away in the second call, but enterSel is always the selection of all the circles.

希望这有助于清理问题！

Hopefully this helps clear things up!

这篇关于存储包含转换的输入选择时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！