d3 डेटा अपडेट करें और ग्राफ

अपडेट करें मेरे पास डी 3 में निम्न सरल रेखा है लेकिन डेटा को पास करने और परिवर्तन को प्रतिबिंबित करने के लिए लाइन को अपडेट करने का प्रयास करने में कोई समस्या नहीं है।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

मैं डी 3 के लिए नया हूँ, लेकिन यह है कि मैं क्या पाया है और मैं मुख्य रूप से स्पार्कलाइन उदाहरण 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

d3 डेटा अपडेट करें और ग्राफ

उत्तर

संबंधित मुद्दे