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

Question

在此处完成fiddle：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);

和我对应的 fiddle 的第 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)) + ")";
    });

（在 fiddle 中切换第 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) 时使用的方法。正如他在文档中提到的

This method is used rarely, as it is typically easier to derive a transition from an existing selection, rather than deriving a selection from an existing transition

指的是您使用的"other"方法：circGraphic.transition().attr(...)

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

综上所述，您对 mbostock 示例本身的解释没有任何问题，只是 lib 版本错误。

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

Why d3.transition() has no effect where theUpdateSelection.transition() works?

transition

d3.js