[javascript] डी 3, नेस्टेड संलग्न, और डेटा प्रवाह


Answers

फिर, काफी अलग नहीं है, लेकिन मेरी पसंदीदा विधि 'कॉल' का उपयोग करना होगा

var data = [{ "label": "chocolate", "text": "Chocolate Cookie", "img": "chocolate.jpg" },
        { "label": "sugar", "text": "Sugar Cookie", "img": "sugar.jpg" }];

d3.select("body").selectAll("div")
    .data(data)
  .enter().append("div")
    .attr("id", function(d) { return d.label; })
  .call(function(parent){
    parent.append('p').text(function(d){ return d.text; });
    parent.append('img').attr("src", function(d) { return d.img; });​
  });

आपको किसी भी चर को स्टोर करने की आवश्यकता नहीं है और यदि आप कहीं और इसी तरह की संरचना का उपयोग करना चाहते हैं तो आप कॉल किए गए फ़ंक्शन को कारगर कर सकते हैं।

Question

मैं आखिरकार डी 3 सीखने की प्रक्रिया में हूं, और मैंने एक समस्या पर ठोकर खाई कि मुझे जवाब नहीं मिला है। मुझे यकीन नहीं है कि मेरा सवाल इसलिए है क्योंकि मैं पुस्तकालय के साथ मूर्खता से सोच नहीं रहा हूं, या यदि यह ऐसी प्रक्रिया के कारण है जिसे मैं वर्तमान में अनजान हूं। मुझे यह भी जिक्र करना चाहिए कि मैंने जून में वेब से संबंधित चीजें करना शुरू कर दिया है, इसलिए मैं जावास्क्रिप्ट के लिए बिल्कुल नया हूं।

मान लें कि हम एक उपकरण बना रहे हैं जो उपयोगकर्ता को संबंधित छवियों के साथ खाद्य पदार्थों की एक सूची देता है। और अतिरिक्त बाधा को जोड़ दें कि प्रत्येक सूची आइटम को एक अद्वितीय आईडी द्वारा लेबल किया जाना चाहिए ताकि इसे किसी अन्य दृश्य से जोड़ा जा सके। इसका हल करने का मेरा पहला अंतर्ज्ञान <div> 'की प्रत्येक सूची को अपनी आईडी के साथ बनाना है, जहां प्रत्येक div का अपना <p> और <img> । परिणामी एचटीएमएल कुछ ऐसा दिखता है:

<div id="chocolate">
  <p>Chocolate Cookie</p>
  <img src="chocolate.jpg" />
</div>
<div id="sugar">
  <p>Sugar Cookie</p>
  <img src="sugar.jpg" />
</div>

इस उपकरण का डेटा JSON सरणी में है, जहां एक व्यक्तिगत JSON इस तरह दिखता है:

{ "label": "sugar", "text": "Sugar Cookie", "img": "sugar.jpg" }

क्या एचटीएमएल उत्पन्न करने का कोई तरीका है एक झुकाव गिर गया? एक div जोड़ने के आधार मामले से शुरू, कोड कुछ ऐसा दिख सकता है:

d3.select(containerId).selectAll('div')                                                          
   .data(food)
   .enter().append('div')
   .attr('id', function(d) { return d.label; });

अब, <div> में <p> जोड़ने के बारे में क्या? मेरा मूल विचार कुछ ऐसा करना था:

d3.select(containerId).selectAll('div')                                                          
   .data(food)
   .enter().append('div')
   .attr('id', function(d) { return d.label; })
       .append('p').text('somethingHere');

लेकिन, मुझे इसके साथ दो समस्याएं दिखाई देती हैं: (1) आप div तत्व से डेटा कैसे प्राप्त करते हैं, और (2) आप एक घोषणात्मक श्रृंखला में एक ही माता-पिता को कई बच्चों को कैसे जोड़ सकते हैं? मैं तीसरे चरण को बनाने का एक तरीका नहीं सोच सकता जहां मैं आईएमजी पर संलग्न होगा।

मुझे एक और पोस्ट पर नेस्टेड चयन का जिक्र मिला, जिसने http://bost.ocks.org/mike/nest/ को इंगित किया। लेकिन नेस्टेड चयन है, और इसलिए इस स्थिति के लिए उपयुक्त / बेवकूफ, तीन हिस्सों में अलग-अलग तोड़ना? या क्या वास्तव में घोषणाओं की एक श्रृंखला में इस संरचना को बनाने के लिए एक अच्छी तरह से निर्मित तरीका है? ऐसा लगता है कि https://github.com/mbostock/d3/wiki/Selections चयनों पर उल्लिखित उपखंडों के साथ एक तरीका हो सकता है, लेकिन मैं उस परिकल्पना का परीक्षण करने के लिए भाषा से पर्याप्त परिचित नहीं हूं।

एक वैचारिक स्तर से, इन तीन वस्तुओं ( div , p , और img ) को अलग-अलग इकाइयों की बजाय एक समूह की तरह माना जाता है, और यदि कोड भी उस परिलक्षित होता है तो यह अच्छा होगा।






Related