D3.jsバー要素が動的に追加されない

Question

D3のグラフにデータを追加または削除するときに何が起きているのかを知るために、ダミーデータを使った基本的な例を作成しました。例のフィドルはhereです。

私の理解のために、generateBars（data）の機能;

var bars = svg.selectAll(".testUpdateBar").data(data); 

更新：

testUpdateX.domain(data.map(function(d) {return d.destination;})); 
testUpdateY.domain([0, d3.max(data, function(d) {return d.p_in;})]); 

は、パラメータから新しいデータ変数を渡します。

私は軸に次の呼び出しがそれらを正しくスケールする原因となることを保証し、xとyのドメインを更新します現在のバーのx、y、幅と高さ：

bars.transition().duration(2500) 
    .attr("x", function(d) {return testUpdateX(d.destination);}) 
    .attr("y", function(d) {return testUpdateY(d.p_in);}) 
    .attr("width", testUpdateX.bandwidth() - 5) 
    .attr("height", function(d) {return testUpdateHeight - testUpdateY(d.p_in);}) 
    .style("fill", function(d) { 
     var maxIn = d3.max(data, function(d) {return d.p_in;}); 
     if (d.p_in < maxIn * 0.3) { 
      return "red"; 
     } else if (d.p_in > maxIn * 0.3 && d.p_in < maxIn * 0.6) { 
      return "orange"; 
     } else { 
      return "green"; 
     } 
    }); 

次に、新しい「rect」要素をそれに.enter()関数の呼び出しと同じ属性およびスタイルを適用して新しいデータ：

bars.enter().append("rect").attr("class", "testUpdateBar") 
    .attr("x", //...) 
    .attr("y", //...) 
     etc... 

が削除されたすべてのデータのバーを除去するために.exit()と.remove()を呼び出す：

bars.exit().transition().duration(2500).remove(); 

新しく指定されたドメインに基づいてそれらを更新するために、最終的に、再呼び出し私軸：

svg.select(".testUpdateXaxis").transition().duration(2500).call(testUpdateXaxis); 
svg.select(".testUpdateYaxis").transition().duration(2500).call(testUpdateYaxis); 

「Spar」の最終バーが表示されないのはなぜですか？ y軸は新しい値であり、スペースは作成されますが、矩形要素は追加されていないようです。

不必要に長い変数名にはお詫び申し上げます。私はこれを既存のファイル内でテストしていて、名前が矛盾しないようにしたいと考えました。

Answer 1

あなたのコードを見てください。あなたのgenerateBars関数の中で、これを持っている：

したがって

var svg = d3.select("body"); 

、あなたが入力した選択のSpar四角形を追加あなたが実際にあるボタンをクリックしたときに... 外 SVG！

それは単に次のようになります、何もありません

！ここで

が更新さjsfiddleである：その行を除去することにより、だから、https://jsfiddle.net/pugya97h/