D3.js棒グラフは追加されず、新しいグラフが作成されます

Question

私はd3.jsを使用して結果表から棒グラフを作成しています。すべてのコードは以下の通りです。 1つのテーブルがcsvファイルからデータを取得します。次に、それを別のテーブルにクローン化します。このとき、棒グラフのバーを変更する必要があります。しかし、代わりに新しい棒グラフが作成されます。どんな助言や助けも本当に感謝します、ありがとう。

updateCode() 
function test() 
{ 
var source = document.getElementById('table'); 
var destination = document.getElementById('myclonediv'); 
var copy = source.cloneNode(true); 
copy.setAttribute('id', 'myclonediv'); 
destination.parentNode.replaceChild(copy, destination); 
var canvas; 
createGraph() 
} 
function createGraph() 
{ 
    d3.csv(googlesheet, function(data) { 


     //create container - canvas 
     canvas = d3.select("body").append("svg") 
      //width and height 
      .attr("width", 300) 
      .attr("height", 1000) 

     //add bars - rectangle 
     canvas.selectAll("rect") 
      //loading data variable 
      .data(data) 
      //enter method 
      .enter() 
       //append rectangle for each element 
       .append("rect") 
       //width - d will reference data, d.age - from csv file * 10 so bars are bigger 
       .attr("width", function(d) { return d.Random * 10}) 
       //was 50 now 48 to allow space between bars 
       .attr("height", 48) 
       // y function of the index, for each element 
       .attr("y", function(d, i) { return i *50}) 
       //colour blue 
       .attr("fill", "blue"); 

      //var newData = parsedCSV.replace(',', ''); 
      //var test = parsedCSV.substring(parsedCSV.indexOf(",") + 1); 


      //add text to each bar - repeat before 
     canvas.selectAll("text") 
      .data(data) 
      .enter() 
       .append("text") 
        //white text 
       .attr("fill", "red") 
        //same position on each bar -- + 24 is half of 48 in height -- now middle of bar 
       .attr("y", function(d,i) { return i *50+24}) 
        //what text - d.name 
       .text(function(d) { return d.Random; }) 

      }) 


} 
function remove() 
{ 
    var tableCode = d3.select("#table"); 
tableCode.selectAll("*").remove(); 
    updateCode() 
} 


function updateCode() 
{ 
    var tabulate = function (data,columns) {      
    var table = d3.select('#table').append('table') 
    var thead = table.append('thead') 
    var tbody = table.append('tbody') 

    thead.append('tr') 
     .selectAll('th') 
     .data(columns) 
     .enter() 
     .append('th') 
     .text(function (d) { return d }) 

    var rows = tbody.selectAll('tr') 
     .data(data) 
     .enter() 
     .append('tr') 

    var cells = rows.selectAll('td') 
     .data(function(row) { 
      return columns.map(function (column) { 
       return { column: column, value: row[column] } 
      }) 
     }) 
     .enter() 
    .append('td') 
     .text(function (d) { return d.value }) 

    return table; 
} 

d3.csv(googlesheet,function (data) { 
    var columns = ['Test','Random'] 
    tabulate(data,columns) 



}) 
} 

Answer 1

あなたがcreateGraph()機能を実行するたびに、あなたがこれを行う：

canvas = d3.select("body").append("svg") 

あなたの「キャンバス」の選択は、新しいSVG要素であるあなたは、関数を実行するたびに意味。新しいSVGには長方形がないよう、選択は各要素の四角形を作成し入力し、

canvas.selectAll("rect") 
    //loading data variable 
    .data(data) 
    //enter method 
    .enter() 

しかし、この新しいSVGを使用すると、すべての矩形を選択し、選択を入力してください。テキストと同じです。そして、それは新しいソフトウェアなので、あなたはグラフを複製しました。

（入力選択は、該当するDOM要素を持たないデータ・アレイ内の各項目のDOM要素を作成し、自分の選択が空であるので、アレイ内の各項目に対して1つの要素を作成する。）

最も簡単な修正点は、createGraph関数にsvgを追加しないことです.htmlに関数を追加する前に追加してください。

svg = d3.select("svg") // assuming you have only one svg, otherwise give it an id or class 

は今、あなたは適切な入力/更新/終了サイクルを実行する必要がありますが、それはV3との間に違いがあるため重要であるあなたが使用しているD3のバージョンは明らかではありません。そして、createGraph機能でそれを選択しますv4。