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




2 Answers

आप एक जंजीर कमांड के भीतर कई बच्चे तत्व नहीं जोड़ सकते हैं। आपको एक चर में मूल चयन को सहेजने की आवश्यकता होगी। यह वही करना चाहिए जो आप चाहते हैं:

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

var diventer = d3.select("body").selectAll("div")
    .data(data)
  .enter().append("div")
    .attr("id", function(d) { return d.label; });

diventer.append("p")
    .text(function(d) { return d.text; });

diventer.append("img")
    .attr("src", function(d) { return d.img; });​

काम करने वाली पहेली देखें: http://jsfiddle.net/UNjuP/

आप सोच रहे थे कि p या img जैसे बच्चे तत्व को उसके माता-पिता से जुड़े डेटा तक पहुंच प्राप्त होती है। जब आप एक नया तत्व जोड़ते हैं तो डेटा माता-पिता से स्वचालित रूप से विरासत में प्राप्त होता है। इसका मतलब है कि पी और आईएमजी तत्वों के पास समान डेटा होगा जो माता-पिता div के रूप में उनके लिए बाध्य होगा।

यह डेटा प्रचार append विधि के लिए अद्वितीय नहीं है। यह निम्नलिखित selection विधियों के साथ होता है: append , insert और select

उदाहरण के लिए, select.append के लिए:

selection.append (नाम)

वर्तमान चयन में प्रत्येक तत्व के अंतिम बच्चे के रूप में निर्दिष्ट नाम के साथ एक नया तत्व जोड़ता है। संलग्न तत्व युक्त एक नया चयन देता है। प्रत्येक नए तत्व को मौजूदा तत्वों का डेटा विरासत में मिलता है, यदि कोई हो, तो उप-चयनों के लिए चयन करें। नाम निरंतर के रूप में निर्दिष्ट किया जाना चाहिए, हालांकि भविष्य में हम मौजूदा तत्वों या फ़ंक्शन को गतिशील रूप से नाम उत्पन्न करने की अनुमति दे सकते हैं।

अगर कुछ स्पष्ट नहीं है तो विवरण के बारे में पूछने के लिए स्वतंत्र महसूस करें।

संपादित करें

आप select.each विधि का उपयोग करके एक चर में चयन को संग्रहीत किए बिना एकाधिक बाल तत्व जोड़ सकते हैं। फिर आप सीधे माता-पिता से डेटा तक पहुंच सकते हैं:

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; })
    .each(function(d) {
        d3.select(this).append("p")
          .text(d.text);
        d3.select(this).append("img")
          .attr("src", d.img);
    });

मैं आखिरकार डी 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 ) को अलग-अलग इकाइयों की बजाय एक समूह की तरह माना जाता है, और यदि कोड भी उस परिलक्षित होता है तो यह अच्छा होगा।




यह नॉटत के उत्तर से मौलिक रूप से अलग नहीं है, लेकिन मुझे लगता है कि कोड को चयन चयन के बजाय अद्यतन चयन को सहेजकर थोड़ा क्लीनर बनाया जा सकता है, और उसमें से एक ऑपरेशन के लिए चयन चयन प्राप्त करने की आवश्यकता है (जोड़ना आसपास के div)।

जब आप एंटर () चयन में कोई तत्व डालते हैं या जोड़ते हैं, तो यह अद्यतन चयन में जोड़ा जाता है जिसे आप बाद में काम कर सकते हैं। इसका अर्थ यह है कि आप डेटा में शामिल हो सकते हैं, फिर एंटर चयन के साथ एक div जोड़ सकते हैं, और फिर जब आप अपडेट चयन के साथ जोड़ते हैं, तो आप एंटर चयन में जोड़े गए divs के भीतर संलग्न होंगे:

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

var cookie = d3.select("#cookie-jar").selectAll().data(cookies);
cookie.enter().append("div");
cookie.append("p").text(function(d){ return d.text });
cookie.append("img").attr("src",function(d){ return d.img });
#cookie-jar div { border: solid 1px black; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="cookie-jar"></div>




Related

javascript d3.js