d3更新數據和更新圖

我在d3中有以下簡單的行，但沒有試圖弄清楚如何傳遞data2並更新行以反映更改的問題。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想出了這個。

而是線條的繪製與此代碼的：

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

生成單獨的線：

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", line);

然後，當你想更新您致電的數據：

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

這個sparklines的例子還告訴你如何給它設置動畫:)

來源

2012-01-05 15:16:36

d3更新數據和更新圖

回答

相關問題