为什么在UpdateSelection.transition（）工作时，d3.transition（）不起作用？

完整的小提琴的位置：https://jsfiddle.net/scottbrown0001/o7qL4dpr/为什么在UpdateSelection.transition（）工作时，d3.transition（）不起作用？

我模仿我在https://bost.ocks.org/mike/constancy/来源看，和我变得有点不同的行为，我不明白的。

麦克博斯托克的源极线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在小提琴的）上的图形按预期方式工作。

我一直在钻研这个例子和文档，并与我的代码玩，我无法弄清楚为什么这种差异。任何人都看到什么

来源

2016-11-09 Scott

就是这个原因：你使用D3 4.x版，而博斯托克的示例使用~~D3 3.x版~~（实际上，版本2.x）。

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

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

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

selection.transition([name])

这意味着它唯一的参数是过渡的名称，而不是选择。

此外，请注意，这是4.x版本，您可能必须选择merge()。

来源

2016-11-10 00:36:16

感谢您的链接，您对合并和3.x/4.x的使用做出的解释具有迫切的意义，并且是我昨天在文档中搜索和搜索的确切内容！我看到了下面的效果（3.0），但当我意识到我需要它时再次找不到它。以下摘要是否正确陈述？ - 在d3 3.x中，enter（）选项包含update（）选择。 - 在d3 4.x中，update（）选择和enter（）选择是分开的，直到update（）选择的合并修改不会影响enter（）选择元素。 – Scott

是的，这似乎是正确的。 –

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

下面是使用你的代码D3 V3：https://jsfiddle.net/kopov76u/（我不得不改变了你的方式宣告这也已经在V4改变了scaleOrdinal(...)其余部分是相同的，你的过渡工作正常两种方法。）

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

这种方法很少使用，因为它通常更容易从现有的选择导出的转变，而不是从现有的过渡

其是指推导出的选择您使用的“其他”方法：circGraphic.transition().attr(...)

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

说了这么多，你对mbostock例子本身的解释没有什么问题，只是错误的lib版本。

来源

2016-11-10 00:36:26

谢谢！我确实看到了你收录的评论，但后来看到了使用它的例子，所以我不确定。你的回答和赫拉尔多在接受方面做出了艰难的选择！ – Scott

为什么在UpdateSelection.transition（）工作时，d3.transition（）不起作用？

回答

相关问题