爲什麼在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（）不起作用？

回答

相關問題