D3 : 데이터 파일 원본을 변경하여 그래프를 동적으로 새로 고치는 방법은 무엇입니까?

Question

d3 액세스를 변경하여 요청시 데이터를 어떻게 업데이트합니까? 예를 들어, 클릭하면 새 데이터 파일에서 데이터를 읽고 AJAX와 같은 그래프에 노드를 추가합니다.

같은 형식의 여러 파일 중 하나 인 data.tsv를 읽으려면 d3.tsv를 사용합니다.

제 질문을 설명하기 위해 간단한 그래프를 만들었습니다. 미리 감사드립니다.

<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 
    var width = 400, 
     height = 200; 

    var x = d3.scale.linear().range([0, width]), 
     y = d3.scale.linear().range([height, 0]); 

    var svg = d3.select("body") 
     .append("svg") 
     .attr("width", width) 
     .attr("height", height); 

    d3.tsv("data.tsv", function(error, data) { 
     if (error) console.warn(error); 
     x.domain(d3.extent(data, function(q) {return q.xCoord;})); 
     y.domain(d3.extent(data, function(q) {return q.yCoord;})); 

     svg.selectAll(".dot") 
      .data(data) 
      .enter().append("circle") 
       .attr("r", 10) 
       .attr("cx", function(d) { return x(d.xCoord); }) 
       .attr("cy", function(d) { return y(d.yCoord); }) 
    }); 
</script> 
<a href="#">update the graph</a> 

Answer 1

시도해보십시오.

var width = 400, 
     height = 200; 

    var x = d3.scale.linear().range([0, width]), 
     y = d3.scale.linear().range([height, 0]); 

    var svg = d3.select("body") 
     .append("svg") 
     .attr("width", width) 
     .attr("height", height); 

var dataSource = 'data.tsv', 
dataSource2 = 'data2.tsv'; 

function updateChart(sourcefile) { 

    d3.tsv(sourcefile, function(error, data) { 
     if (error) console.warn(error); 
     x.domain(d3.extent(data, function(q) {return q.xCoord;})); 
     y.domain(d3.extent(data, function(q) {return q.yCoord;})); 

     svg.selectAll(".dot") 
      .data(data) 
      .enter().append("circle") 
       .attr("r", 10) 
       .attr("cx", function(d) { return x(d.xCoord); }) 
       .attr("cy", function(d) { return y(d.yCoord); }) 
    }); 
} 

updateChart(dataSource); 

//here is where you change the data.. 
d3.select(#button).on("click", function() { 
updateChart(dataSource2) 
})