d3 데이터 업데이트 및 그래프 업데이트

d3에 다음과 같은 단순한 줄이 있지만 데이터를 전달하고 변경 내용을 반영하도록 줄을 수정하는 방법을 찾는 데 문제가 없습니다.d3 데이터 업데이트 및 그래프 업데이트

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>D3 Line Chart Demo</title> 
    <meta charset="utf-8" />  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 

    <link rel="stylesheet" type="text/css" href="style.css"> 

    <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script> 
    <script src="d3.min.js" type="text/javascript" charset="utf-8"></script> 
    <body> 
    <button class="first last" onclick="transition()"> 
     Update 
     </button> 
    <div id="chart"></div> 
    </body> 

    <script> 

    var data = [3, 7, 9, 1, 4, 6, 8, 2, 5]; 
    var data2 = [3, 7, 9, 1, 4, 6, 8, 2, 15]; 
    var width = 600; 
    var height = 400; 
    var max = d3.max(data); 

    x = d3.scale.linear().domain([0, data.length - 1]).range([0, width]); 
    y = d3.scale.linear().domain([0, max]).range([height, 0]); 

    vis = d3.select('#chart') 
     .style('margin', '20px auto') 
     .style('width', "" + width + "px") 
     .append('svg:svg') 
     .attr('width', width) 
     .attr('height', height) 
     .attr('class', 'viz') 
     .append('svg:g'); 

    vis.selectAll('path.line') 
     .data([data]) 
     .enter() 
     .append("svg:path") 
     .attr("d", d3.svg.line().x(function(d, i) { 
      return x(i); 
     }) 
     .y(y)); 
    </script> 
</html>

출처

2011-12-16 Mike

나는 D3에 새로운 오전 그러나 이것은 내가 찾은 내가 주로 스파크 예 here에서이 알아 낸 것입니다.

대신이 코드로 선을 그리는 그런 다음

var line = d3.svg.line().x(function(d, i) { return x(i); }).y(y)

데이터에 적용 :

vis.selectAll('path.line') 
    .data([data]) 
    .enter() 
    .append("svg:path") 
    .attr("d", d3.svg.line().x(function(d, i) {return x(i); }).y(y));

별도로 라인을 생성 당신이 원하는 그런

vis.selectAll('path.line') 
    .data([data]) 
    .enter() 
    .append("svg:path") 
    .attr("d", line);

문의하신 데이터를 업데이트하십시오.

vis.selectAll("path") 
    .data([data]) // set the new data 
    .attr("d", line); // apply the new data values

스파크 라인 예제는 또한 애니메이션하는 방법을 보여줍니다.

출처

2012-01-05 15:16:36

d3 데이터 업데이트 및 그래프 업데이트

답변

관련 문제