D3

Question

में चार्ट डेटा को गतिशील रूप से अपडेट करें मैं आने वाले डेटा के वास्तविक समय विज़ुअलाइजेशन पर काम कर रहा हूं। मैं दृश्य के लिए डी 3 का उपयोग करें और इस उदाहरण के आधार पर शुरू कर दिया:

:

var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
    width = 500 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 

    var x = d3.time.scale().range([0, width]); 
    var y = d3.scale.linear().range([height, 0]); 

    var xAxis = d3.svg.axis().scale(x).orient("bottom"); 
    var yAxis = d3.svg.axis().scale(y).orient("left"); 

    var area = d3.svg.area() 
     .x(function(d) { return x(d.x); }) 
     .y0(height) 
     .y1(function(d) { return y(d.y); }); 

    var svg = d3.select("div#chart").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    var data = [[1,1],[2,3],[3,2],[4,4]]; 

    var dataCallback = function(d) { 
    d.x = +d[0]; 
    d.y = +d[1]; 
    }; 
    data.forEach(dataCallback); 

    x.domain(d3.extent(data, function(d) { return d.x; })); 
    y.domain([0, d3.max(data, function(d) { return d.y; })]); 

    svg.append("path") 
     .datum(data) 
     .attr("class", "area") 
     .attr("d", area); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Number of Messages"); 

यह निम्नलिखित ग्राफ पैदा करता है: http://bl.ocks.org/mbostock/3883195

इस संस्करण मैं वर्तमान पर काम कर रहा हूँ है

अब, क्योंकि इसे नियमित रूप से अपडेट करना चाहिए, मैं निम्न कोड का उपयोग कर ग्राफ में डेटा को गतिशील रूप से अपडेट करना चाहता था:

var n = svg.selectAll("path").data([5,20]) 
    n.enter(); 
    n.exit().remove(); 

हालांकि, यह काम नहीं करता है। मैं डी 3 के लिए नया हूं और अभी भी मूल बातें सीख रहा हूं। आदर्श रूप से, ग्राफ़ विज़ुअलाइजेशन बाईं ओर बदल जाता है और नया डेटा ग्राफ़ में दिखाया जाता है। लेकिन अब तक मैं इसमें नया डेटा भी नहीं जोड़ सकता। क्या कोई मेरी मदद कर सकता है? मैंने इस तरह के उदाहरणों की भी खोज की, लेकिन मुझे कुछ भी नहीं मिला जो वास्तव में मेरी मदद करता है।

Answer 1

डी 3 कितना डेटा जोड़ा गया है और क्या हटाया जा रहा है इसका ट्रैक रखने में बहुत अच्छा है - यह जुड़ने के साथ करता है। http://bl.ocks.org/mbostock/3808218

पर एक नजर डालें हम

svg.append("path") 
    .data([data]) 
    .attr("class", "area") 
    .attr("d", area); 

("गृहीत" के बजाय) और फिर अद्यतन पर बाध्यकारी डेटा का उपयोग की तरह कुछ है, तो:

// update the list of coordinates 
data.splice(0,1); 
data.push([5,20]); 

// re-decorate the last, newly added item 
dataCallback(data[data.length - 1]); 

// You will also need to update your axes 
x.domain(d3.extent(data, function(d) { return d.x; })); 
y.domain([0, d3.max(data, function(d) { return d.y; })]); 

// update the data association with the path and recompute the area 
svg.selectAll("path").data([data]) 
    .attr("d", area); 

और आप अपने क्षेत्र मिलना चाहिए अद्यतन करने के लिए।

आप इसे बाहर की कोशिश कर सकते here

रास्ता साथ

अपने डेटा ज्यादा अंतर नहीं कर सकता है में शामिल हो गए डेटा (गृहीत के बजाय) का उपयोग करते हुए आयोजित है। ध्यान दें कि आप पथ के साथ संबद्ध (एकल) डेटा तत्व निर्देशांक की पूरी सूची है ताकि क्षेत्र को अद्यतन करने के लिए आपको समन्वय की एक नई पूर्ण सूची में पास करने की आवश्यकता हो।

यदि आप वास्तव में उस राशि को कम करना चाहते हैं जिसे आपको फिर से निकालने की आवश्यकता है तो आप क्षेत्र को तोड़ सकते हैं और प्रत्येक पंक्ति खंड को आकर्षित कर सकते हैं। फिर अनिवार्य रूप से आप बार चार्ट उदाहरण पर वापस आते हैं लेकिन बिना फ्लैट सलाखों और कोई अंतर नहीं।