D3.js में स्टैक्ड एरिया

Question

मैं D3.js का उपयोग कर रहा हूं और मुझे एकाधिक श्रृंखला वाले क्षेत्र चार्ट के लिए एक स्टैक्ड लेआउट सेट करने में समस्या हो रही है। मेरे पास मेरे डेटा की दो संभावित संरचनाएं हैं (यदि इससे मदद मिलती है)। एक स्क्रिप्ट को खिलाया कच्चे डेटा, इस संरचना में है:

var data = [{key: 'Group1', value: 37, date: '04/23/12'}, 
      {key: 'Group2', value: 12, date: '04/23/12'}, 
      {key: 'Group3', value: 46, date: '04/23/12'}, 
      {key: 'Group1', value: 32, date: '04/24/12'}, 
      {key: 'Group2', value: 19, date: '04/24/12'}, 
      {key: 'Group3', value: 42, date: '04/24/12'}, 
      {key: 'Group1', value: 45, date: '04/25/12'}, 
      {key: 'Group2', value: 16, date: '04/25/12'}, 
      {key: 'Group3', value: 44, date: '04/25/12'}, 
      {key: 'Group1', value: 24, date: '04/26/12'}, 
      {key: 'Group2', value: 52, date: '04/26/12'}, 
      {key: 'Group3', value: 64, date: '04/26/12'}] 

दूसरा एक आंतरिक संरचना होती है, इस कोड का उपयोग कर बनाया:

pData = d3.nest() 
      .key(function(d) { return d.key; }) 
      .map(data); 

इस संरचना में परिणामी:

pData = {Group1: [{date: 04/23/12, key: "Group1", value: 37}, 
        {date: 04/24/12, key: "Group1", value: 32}, 
        {date: 04/25/12, key: "Group1", value: 45}, 
        ...], 
     Group2: [{date: 04/23/12, key: "Group2", value: 12}, 
        {etc, etc, etc}], 
     GroupX: [...] } 

मेरे प्रश्न: मैं एक स्टैक्ड स्ट्र बनाने के लिए उपर्युक्त डेटा संरचनाओं (या कुछ भिन्नता) में से एक का उपयोग करके d3.layout.stack() जेनरेटर कैसे सेट करूं? अपने डेटा के लिए ucture इस तरह मैं इस के समान एक क्षेत्र जनरेटर करने के लिए इसे पारित कर सकते हैं कि:,

var areaGenerator = d3.svg.area() 
    .interpolate('monotone') 
    .x(function(d) { return x(d.date); }) 
    .y0(h) 
    .y1(function(d) { return y(d.value); }); 

Answer 1

आप ढेर लेआउट करने के लिए परतों की एक सरणी फ़ीड चाहिए ताकि बदलने के लिए पहली बात यह है nest.entries बजाय nest.map उपयोग करने के लिए है । यह key फ़ील्ड (जैसे "समूह 1") और values सरणी वाले ऑब्जेक्ट्स की एक सरणी देता है जिसमें संबंधित रिकॉर्ड होते हैं। फिर आप stack.values एक्सेसर निर्दिष्ट करेंगे ताकि स्टैक लेआउट प्रत्येक परत के लिए values सरणी तक पहुंच सके।

तुम भी उपयुक्त परिभाषित करने के लिए की आवश्यकता होगी एक्स और y ढेर लेआउट के लिए accessors ताकि यह आपके इनपुट डेटा समझ सकते हैं: और y -accessor चाहिए एक्स -accessor d.date लौटना चाहिए, वापसी d.value। आपको अपनी डेट स्ट्रिंग्स को तिथियों में कनवर्ट करने की भी आवश्यकता होगी; आप इससे मदद के लिए d3.time.format का उपयोग कर सकते हैं। उदाहरण के लिए:

var format = d3.time.format("%m/%d/%y"); 
data.forEach(function(d) { d.date = format.parse(d.date); }); 

अंत में, अपने क्षेत्र परिभाषा ताकि आधारभूत Y0 y(d.y0) के रूप में परिभाषित किया गया है और आमदनी y1 y(d.y0 + d.y) के रूप में परिभाषित किया गया है बदल जाते हैं।

• http://bl.ocks.org/3020685