D3.js

Question

में एकाधिक लाइनों को चित्रित करना अब तक, मैं डी 3 विज़ुअलाइजेशन में लाइन तत्व जोड़ने के लिए लूप का उपयोग कर रहा हूं, लेकिन यह एपीआई की भावना में प्रतीत नहीं होता है।

चलो कहते हैं कि मैं कुछ डेटा मिल गया है चलो,

var data = {time: 1, value: 2, value2: 5, value3: 3,value4: 2}, 
      {time: 2, value: 4, value2: 9, value3: 2,value4: 4}, 
      {time: 3, value: 8, value2:12, value3: 2,value4:15}]); 

मैं सभी 4.

के लिए X मैं इस तरह कुछ कर सकते हैं के रूप में चार लाइनों, समय के साथ करना चाहते हैं:

और फिर इन्हें एक करके (या एक लूप द्वारा) जोड़ें।

var line1 = group.selectAll("path.path1") 
     .attr("d",l(data)); 
var line2 = group.selectAll("path.path2") 
     .attr("d",l2(data)); 
var line3 = group.selectAll("path.path3") 
     .attr("d",l3(data)); 
var line4 = group.selectAll("path.path4") 
     .attr("d",l4(data)); 

क्या इन पथों को जोड़ने का एक बेहतर तरीका है?

Answer 1

हां। सबसे पहले मैं आसान यात्रा के लिए अपने डेटा पुनर्गठन होगा, इस तरह:

var series = [ 
    [{time: 1, value: 2}, {time: 2, value: 4}, {time: 3, value: 8}], 
    [{time: 1, value: 5}, {time: 2, value: 9}, {time: 3, value: 12}], 
    [{time: 1, value: 3}, {time: 2, value: 2}, {time: 3, value: 2}], 
    [{time: 1, value: 2}, {time: 2, value: 4}, {time: 3, value: 15}] 
]; 

अब आप सिर्फ एक सामान्य लाइन की जरूरत है:

var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d) { return x(d.time); }) 
    .y(function(d) { return y(d.value); }); 

और, आप तो एक ही बार में पथ के सभी तत्वों को जोड़ सकते हैं :

group.selectAll(".line") 
    .data(series) 
    .enter().append("path") 
    .attr("class", "line") 
    .attr("d", line); 

आप डेटा संरचना प्रारूप छोटा करना चाहते हैं, तो आप भी बार एक अलग सरणी में निकाल सकते हैं, और फिर मूल्यों के लिए एक 2 डी सरणी का उपयोग करें। यही कारण है कि इस प्रकार दिखाई देगा:

var times = [1, 2, 3]; 

var values = [ 
    [2, 4, 8], 
    [5, 9, 12], 
    [3, 2, 2], 
    [2, 4, 15] 
]; 

के बाद से मैट्रिक्स समय मूल्य शामिल नहीं है, आप लाइन जनरेटर के एक्स-एक्सेसर से उसे ढूंढने की जरूरत है। दूसरी ओर, y-एक्सेसर सरल है जब से तुम y पैमाने पर करने के लिए सीधे मैट्रिक्स मूल्य पारित कर सकते हैं:

var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d, i) { return x(times[i]); }) 
    .y(y); 

तत्वों का निर्माण रहता है एक ही:

group.selectAll(".line") 
    .data(values) 
    .enter().append("path") 
    .attr("class", "line") 
    .attr("d", line);