Question

完整的小提琴：https://jsfiddle.net/scottbrown0001/o7qL4dpr/

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

Mike Bostock的源代码行142＆amp; ff和171＆amp; 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＆amp; ff和78＆amp; 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/（我必须更改的是您在v4中声明scaleOrdinal(...)的方式。其余的相同，您的转换工作正常用这两种方法。）

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

很少使用此方法，因为通常更容易从现有选择中导出转换，而不是从现有转换中派生选择

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

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

所有这一切，你对mbostock的例子本身的解释没有错，只是错误版本的lib。

为什么d3.transition（）对于UpdateSelection.transition（）有效？

2 个答案: