トランジション時にn.callは関数の問題ではありません

Question

いくつかのテキストラベルを生成し、それらをD3グラフに移行しようとしています。

擬似コード：（1）所望の[X、Y]

に座標0,0 （2）遷移ラベルのテキストラベルを生成私は以下のスクリプトを実行すると、しかし、私は次の問題を取得しますコンソールログ・ウィンドウ：次のように

私のコードは次のとおりです。

svg.selectAll(".groups") 
      .data(sampleData) 
      .append("text") 
      .attr("class", "label") 
      .text(function(d){return d.c}) 
      .attr("dx",0) 
      .attr("dy", 0) 
      .style("fill-opacity",0) 
      .each("end", function(){ 
       d3.selectAll(".label") 
       .transition() 
       .duration(2000) 
       .style("fill-opacity", 1) 
       .attr("dx", function(d) { 
        return x(d.x); 
        }) 
       .attr("dy", function(d) { 
        return y(d.y); 
        }); 
       }) 

はあなたのいずれかを持っています何がうまくいかないのか？コードの2つのビットはうまく動作しています。それは私に頭痛を与えている移行です。

Answer 1

ここにeachは必要ありません。 Eachは、遷移にリスナーを追加していますが、そのeach機能に到達したときには、遷移の選択を持っていない：

svg.selectAll(".groups") 
    .data(sampleData) 
    .append("text") 
    .attr("class", "label") 
    .text(function(d) { 
     return d.c 
    }) 
    .attr("dx", 0) 
    .attr("dy", 0) 
    .style("fill-opacity", 0) 
    .each("end", function() {... 
    //No 'transition()' before this point 

なしがあるので（ところで、あなたはまた、「入力」の選択を持っていません このように、位置をゼロ（デフォルトでは位置がゼロであるため、行う必要はありません）に設定し、遷移選択で変更することができます。

var svg = d3.select("svg"); 
 
var data = ["foo", "bar", "baz", "foobar", "foobaz", "barbaz"]; 
 

 
svg.selectAll("foo") 
 
    .data(data) 
 
    .enter() 
 
    .append("text") 
 
    .text(function(d) { 
 
    return d 
 
    }) 
 
    .style("fill-opacity", 0) 
 
    .transition() 
 
    .duration(2000) 
 
    .style("fill-opacity", 1) 
 
    .attr("dx", function(){ return Math.random()*280}) 
 
    .attr("dy", function(){ return 20 + Math.random()*130});

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg></svg>