d3.js

Question

मैं एक वास्तविक समय barchart कि समय के साथ मूल्यों भूखंडों, d3.js

का उपयोग कर इस तरह मैं यह कर रहा हूँ बनाने के लिए कोशिश कर रहा हूँ में एक मौजूदा तत्व को एक तत्व जोड़।

var dataset = [ 5, 10, 15, 20, 25 ]; 
var w = 1800; 
var h = 500; 
var barPadding = 1; 

setInterval(function(){ 
    dataset.push(Math.floor(Math.random()*51)); 
    draw(); 
},1000); 

function draw(){ 

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

    svg.selectAll("rect").data(dataset) 
     .enter() 
     .append("rect") 
     .attr("x", function(d, i){return 12*i;}) 
     .attr("y", function(d){return h -d*4; }) 
     .attr("width", 11) 
     .attr("height", function(d) { return d * 4; }) 
     .attr("fill", "teal") 
     .attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")";}); 
} 

समस्या यह है कि जब भी डेटा सरणी में कोई नया मान जोड़ा जाता है तो मैं पूरे ग्राफ को फिर से चला रहा हूं।

मैं बार बार ग्राफ में बार बार कैसे जोड़ूं जो पहले से खींचा गया है, हर बार जब कोई नया मान सरणी में जोड़ा जाता है, तो हर बार इसे फिर से निकालने के बजाय?

Answer 1

आप करीब हैं, बस svg तत्व को फिर से निकालना बंद करें। यदि आपको केवल नए तत्वों को जोड़ने की आवश्यकता है, तो यह आपके ड्रॉ फ़ंक्शन को तब किया जाना चाहिए जब इसे कॉल किया जाए।

var dataset = [ 5, 10, 15, 20, 25 ]; 
var w = 1800; 
var h = 300; 
var barPadding = 1; 

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

setInterval(function(){ 
    dataset.push(Math.floor(Math.random()*51)); 
    draw(); 
},1000); 

function draw(){ 

    container.selectAll("rect").data(dataset).enter().append("rect") 
     .attr("x", function(d, i){return 12*i;}) 
     .attr("y", function(d){return h -d*4; }) 
     .attr("width", 11) 
     .attr("height", function(d) { return d * 4; }) 
     .attr("fill", "teal") 
     .attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")";}); 
}​ 

http://jsfiddle.net/Wexcode/LYqfU/

Answer 2

सुनिश्चित नहीं है कि आप किस प्रकार का प्रभाव खोज रहे हैं, लेकिन this fiddle पर एक नज़र डालें।

निम्नलिखित redraw समारोह barchart को जोड़ने रखें ताकि वह सही करने के लिए विकसित करने के लिए जारी रहेगा होगा:

function redraw() { 
    var rect = svg.selectAll("rect") 
     .data(dataset); 

    rect.enter().insert("rect", "line") 
     .attr("x", function(d, i) { return 12*(i+1); }) 
     .attr("y", function(d) { return h -d*4 }) 
     .attr("width", 11) 
     .attr("height", function(d) { return d * 4; }) 
     .attr("fill", "teal") 
     .attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")";}) 

    rect.transition() 
     .duration(800) 
     .attr("x", function(d, i) { return 12*i; }); 

} 

an mbostock tutorial से उधार ली गई।