1. дома
  2. Вопрос и ответ
  3. d3 update data and update graph

d3 update data and update graph

2011-12-16 4 views
35

У меня есть следующая простая строка в d3, но у меня нет проблемы с попыткой выяснить, как передать ее data2 и обновить строку, чтобы отразить изменение.d3 update data and update graph

<!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

ответ

55

Я новичок в D3, но это то, что я нашел, и я полагал, что это в основном из примера Sparklines 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

Пример искровых линий также показывает, как его оживить :)

источник

2012-01-05 15:16:36

Смежные вопросы

 Смежные вопросы