D3js - एक मल्टी-लाइन चार्ट बनाना और आसानी से अपडेट करना

Question

मैंने डी 3 का उपयोग करके थोड़ा परीक्षण लाइन चार्ट बनाया है, लेकिन चूंकि मैं लाइब्रेरी में काफी नया हूं, मुझे यकीन नहीं है कि एकाधिक लाइनों को जोड़ने का सबसे अच्छा तरीका क्या होगा एक चार्ट, फिलहाल मेरे पास केवल fiddle में प्रदर्शित एक पंक्ति है।

मैं चार्ट पर 2 लाइनों को प्रदर्शित करना चाहता हूं, लेकिन मुझे यह सुनिश्चित नहीं है कि कॉपी पेस्टिंग कोड के बिना इसे कैसे प्राप्त किया जाए, जो मुझे यकीन है कि मैं बहुत अक्षम हूं क्योंकि मैं नियमित अंतराल पर ग्राफ को अपडेट/एनिमेट करना चाहता हूं उपयोगकर्ता चयन के आधार पर।

इसके बजाय इस बात का

,

var data = [12345,22345,32345,42345,52345,62345,72345,82345,92345,102345,112345,122345,132345,142345]; 

मैं कुछ इस तरह प्रदर्शित करना चाहते हैं,

var data = [ 
      [12345,42345,3234,22345,72345,62345,32345,92345,52345,22345], // line one 
      [1234,4234,3234,2234,7234,6234,3234,9234,5234,2234] // line two 
      ]; 

इस संभावना होगा? यदि हां, तो इस तक पहुंचने का सबसे अच्छा तरीका क्या होगा, ताकि जब आवश्यक हो तो मैं ग्राफ को आसानी से अपडेट/एनिमेट कर सकता हूं?

नोट: मैं केवल सीखने की कोशिश कर रहा हूं और पूरी तरह से डी 3 सर्वोत्तम प्रथाओं और पुस्तकालय के साथ परिचित हूं। धन्यवाद।

Answer 1

यह संभव और उचित है। एक ट्यूटोरियल है जो D3 Nested Selection Tutorial पर डेटा के घोंसले का वर्णन करता है।

नीचे कोड है जिसे मैंने आपके पहेली से यह दिखाने के लिए हैक किया है।

var data = [   
[12345,42345,3234,22345,72345,62345,32345,92345,52345,22345], 
[1234,4234,3234,2234,7234,6234,3234,9234,5234,2234] 
      ]; 

var width = 625, 
    height = 350; 

var x = d3.scale.linear() 
    .domain([0,data[0].length]) // Hack. Computing x-domain from 1st array 
    .range([0, width]); 

var y = d3.scale.linear() 
    .domain([0,d3.max(data[0])]) // Hack. Computing y-domain from 1st array 
    .range([height, 0]); 

var line = d3.svg.line() 
    .x(function(d,i) { return x(i); }) 
    .y(function(d) { return y(d); }); 

var area = d3.svg.area() 
    .x(line.x()) 
    .y1(line.y()) 
    .y0(y(0)); 

var svg = d3.select("body").append("svg") 
    //.datum(data) 
    .attr("width", width) 
    .attr("height", height) 
    //.append("g"); 

var lines = svg.selectAll("g") 
    .data(data); // The data here is two arrays 

// for each array, create a 'g' line container 
var aLineContainer = lines 
    .enter().append("g"); 

/*svg.append("path") 
    .attr("class", "area") 
    .attr("d", area);*/ 

aLineContainer.append("path") 
    .attr("class", "area") 
    .attr("d", area); 

/*svg.append("path") 
    .attr("class", "line") 
    .attr("d", line);*/ 

aLineContainer.append("path") 
    .attr("class", "line") 
    .attr("d", line); 

/*svg.selectAll(".dot") 
    .data(data) 
    .enter().append("circle") 
    .attr("class", "dot") 
    .attr("cx", line.x()) 
    .attr("cy", line.y()) 
    .attr("r", 3.5);*/ 
// Access the nested data, which are values within the array here 
aLineContainer.selectAll(".dot") 
    .data(function(d, i) { return d; }) // This is the nested data call 
    .enter() 
    .append("circle") 
    .attr("class", "dot") 
    .attr("cx", line.x()) 
    .attr("cy", line.y()) 
    .attr("r", 3.5); 
​ 

एक कमी है कि मैं एक्स के लिए डोमेन अभिकलन और y पहली सरणी है, जो एक हैक है बंद अक्ष, लेकिन आपके सवाल का वास्तव में करने के लिए उचित नहीं है।