为什么 d3.transition() 在 updateSelection.transition() 工作的地方不起作用？

Question

在这里完成小提琴：https://jsfiddle.net/scottbrown0001/o7qL4dpr/

我正在模仿我在https://bost.ocks.org/mike/constancy/ 的源代码中看到的内容，但我得到了一些我不理解的不同行为。

Mike Bostock 的源代码行 142 &ff 和 171 &ff 有

var bar = svg.selectAll(".bar")
  .data(top, function(d) { return d.State; });

// ...snippage...

var barUpdate = d3.transition(bar)
  .attr("transform", function(d) { return "translate(0," + (d.y0 = y(d.State)) + ")"; })
  .style("fill-opacity", 1);

而我对应的第 44 &ff 和 78 &ff 行有

var circGraphic = playground.selectAll(".circ-g")
  .data(CIRCLES, function(d) {
    return d.name;
  });

// ...snippage...

var circUpdate = d3.transition(circGraphic)
  .attr("transform", function(d, i) {
    console.log("UPDATING to " + circ_y(circIndex(step + i)));
    return "translate(" + circ_x(i) + "," + circ_y(circIndex(step + i)) + ")";
    });

考虑到bar 和circGraphic 的定义方式，肯定看起来是平行的。但就我而言，图形没有明显变化。

如果我更改第 78 行，以便我有

circGraphic.transition()
  .attr("transform", function(d, i) {
    console.log("UPDATING to " + circ_y(circIndex(step + i)));
    return "translate(" + circ_x(i) + "," + circ_y(circIndex(step + i)) + ")";
    });

（将注释从小提琴中的第 77 行和第 78 行切换出来）图形按预期工作。

我一直在仔细研究示例和文档并使用我的代码，但我无法弄清楚为什么会出现这种差异。有人看到了吗？

Answer 1

这是原因：您使用的是 D3 版本 4.x，而 Bostock 的示例使用的是 D3 版本 3.x（实际上，版本 2.x)。

关于参数，这些版本有不同的transition() 函数。在 D3 v3.x 中，这是函数：

d3.transition([selection], [name])

意思是第一个参数是选择。但在 D3 v4.x 中：

selection.transition([name])

意思是它需要的唯一参数是转换的名称，而不是选择。

另外，请注意，这是 4.x 版本，您可能需要merge() 选择。

Answer 2

如果您使用的是 d3 v3，您的代码可以正常工作。您正在使用 v4，并且您尝试使用的方法不再可用。

这是您使用 d3 v3 的代码：https://jsfiddle.net/kopov76u/（我必须更改的只是您声明 scaleOrdinal(...) 的方式，这在 v4 中也发生了变化。其余部分相同，并且您的转换在这两种方法下都可以正常工作。 )

This 是您在使用d3.transition(circGraphic) 时使用的方法。正如他在文档中提到的

这种方法很少使用，因为它通常更容易从现有选择中派生过渡，而不是从现有过渡中派生选择

指的是您使用的“其他”方法：circGraphic.transition().attr(...)

您可能会发现大多数示例，甚至 d3 v3 的示例都使用后一种方法。

话虽如此，您对 mbostock 示例的解释本身并没有错，只是 lib 的错误版本。