D3.js 막 대형 차트가 추가되지 않고 새로운 차트가 생성됩니다.

Question

결과 표에서 막 대형 차트를 만들 때 d3.js를 사용하고 있습니다. 모든 코드는 아래와 같습니다. 한 테이블은 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() 기능을 실행할 때마다이 작업을 수행 :

당신의 "캔버스"선택은 새로운 SVG 요소의이 기능을 실행할 때마다 의미

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

. 새로운 SVG에는 사각형이없는 한, 선택은 각 요소에 대한 사각형을 만들어 입력

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

그러나이 새로운 SVG를 사용하면 모든 사각형을 선택하고 선택을 입력 않습니다. 텍스트와 동일합니다. 그리고 새로운 svg이기 때문에 그래프를 복제했습니다.

(는 IT가 배열의 각 항목에 대해 하나 개의 요소가 생성되도록 선택이 비어 해당하는 DOM 요소가없는 데이터 배열의 각 항목에 대한 DOM 요소를 생성한다 선택을 입력한다.)

가장 쉬운 해결 방법은 createGraph 함수에 svg를 추가하지 않는 것입니다. html에 추가하거나 함수가 호출되기 전에 추가해야합니다.

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

지금 당신이 적절한 입력/업데이트/종료주기를 실행해야하지만, v3 및 사이에 차이가 있기 때문에 중요하다 당신이 사용하는 D3의 버전을 분명하지 않다 : 그런 다음 createGraph 기능에 그냥 선택 v4.