d3.jsのパスにxタグとyタグが追加されていません

Question

forループを使用してウェブページにグラフを動的に追加しようとしています。各グラフは、テーブルの別の行にあります。 最後のグラフだけが表示されています。他の人にとって、g要素は追加されません。

これが最後のグラフ（成功したもの）の階層である： - TR - > TD - > SVG - > G（変換） - > G（X軸） - > G（y軸） - >パス

およびその他のために、それは： - TR - > TD - > SVG - > G（変換）

さらなる分析に、私が成功したグラフ、経路、x及びy軸にとして添加されることが見出さループが実行されているので、何度も繰り返します。

は、ここに私のコードです： -

// Define the line 
    var valueline = d3.svg.line() 
     .x(function(d) { return x(d[xA]); }) 
     .y(function(d) { return y(d[yA]); }); 

    for(var i = 0; i < yAV.length; i++){ 
     var yA = yAV[i]; 

    // Adds the svg canvas 
    chart1 = d3.select("#graph table") 
    .append("tr") 
    .append("td") 
    .append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    // Get the data 

    d3.json("graphdata.json", function(error, data) { 
      data.forEach(function(d) { 
      d[xA] = +d[xA]; 
      d[yA] = +d[yA]; 
      }); 

      x.domain(d3.extent(data, function(d) { return d[xA]; })); 
      y.domain(d3.extent(data, function(d) { return d[yA]; })); 


     // Add the X Axis 
     chart1.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 


     // Add the Y Axis 
     chart1.append("g") 
      .attr("class", "y axis") 
      .call(yAxis); 

     // Add the valueline path. 
     chart1.append("path") 
      .attr("class", "line") 
      .attr("d", valueline(data)); 


    }); 

    } 

は、この問題を解決する私を助けてください。

Answer 1

d3.jsonのコールバックはです。非同期です。あなたはそれがこのように実行するために期待している：

loop iteration 1: 
    chart1 = add new svg/g 
    d3.json add stuff to chart1 
loop iteration 2: 
    chart1 = add new svg/g 
    d3.json add stuff to chart1 
loop iteration 3: etc 

をしかしd3.jsonコールバックは、データがロードされたときにのみ実行され、JavaScriptを（現在のコードの実行を終了したときに、ブラウザベースのJavaScriptでのみ実行されますループ全体） - Javascript asynchronous execution: will a callback interrupt running code?を参照してください。

だから、何を買ってあげることです。

loop iteration 1: 
    chart1 = add svg/g 
loop iteration 2: 
    chart1 = add svg/g 
loop iteration3: etc 
end of loop 
then 
a set of d3.json callbacks adding stuff to last value of chart1 

とその最後の行は、なぜあなただ​​けd3.jsonコールバック内の要素を見ているされて、あなたにそれを修正するには1つのSVG

に追加しましたsvg要素とデータセットの正しいインデックスにアクセスするために各実行時にインクリメントするd3.jsonコールバック内にカウンタを追加する必要があります（毎回同じデータセットと思われると思います）