[dom] डीओएम तत्व का उपयोग कैसे करें जो डी 3 एसवीजी ऑब्जेक्ट से संबंधित है?


Answers

किसी एसवीजी दस्तावेज़ में किसी भी DOM तत्व में एक ownerSVGElement गुण होगा जो उस SVG दस्तावेज़ का संदर्भ देता है।

डी 3 के चयन केवल उन पर अतिरिक्त तरीकों के साथ घोंसला वाले सरणी हैं; यदि आपके पास है। एक डीओएम तत्व .select() संपादित करें, तो आप इसे [0][0] साथ प्राप्त कर सकते हैं, उदाहरण के लिए:

var foo = d3.select(someDOM);

// later, where you don't have someDOM but you do have foo
var someDom = foo[0][0];
var svgRoot = someDom.ownerSVGElement;

नोट, हालांकि, यदि आप d3.select(this) का उपयोग कर रहे हैं तो this पहले ही डीओएम तत्व है; आपको बस इसे खोलने के लिए इसे डी 3 चयन में लपेटने की आवश्यकता नहीं है।

Question

मैं अपने मूल बबलचार्ट्स में से एक के साथ प्रयोग करके डी 3 सीखने की कोशिश कर रहा हूं। पहला कार्य: एक बुलबुला खींचने के तरीके को समझें और इसे खींचा जा रहा है, जबकि यह शीर्ष वस्तु बन गया है। (समस्या DOM के ऑब्जेक्ट मॉडल को DOM पर मैप करने के लिए मिल रही है, लेकिन मैं वहां जाऊंगा ...)

इसे खींचने के लिए, हम केवल उनके द्वारा प्रदान किए गए कोड का उपयोग करके डी 3 के ड्रैग व्यवहार का आह्वान कर सकते हैं:

var drag = d3.behavior.drag()
    .on("dragstart", dragstart)
    .on("drag", dragmove)
    .on("dragend", dragend);

बहुत अच्छा काम करता है। अच्छी तरह से drags। अब, हम इसे सबसे ऊपर आइटम कैसे प्राप्त करते हैं? यहां "svg z-index" के लिए खोजें और यह जल्दी से स्पष्ट हो जाता है कि इंडेक्स को बदलने का एकमात्र तरीका डीओएम में ऑब्जेक्ट को आगे ले जाना है। ठीक। वे इसे आसान नहीं बनाते क्योंकि व्यक्तिगत बुलबुले में आईडी नहीं होती है, लेकिन कंसोल के साथ घूमती है, हम उन बबल ऑब्जेक्ट्स में से एक को ढूंढ सकते हैं:

$("text:contains('TimeScale')").parent()

और हम इसे युक्त svg तत्व के अंत में ले जा सकते हैं:

.appendTo('svg')

ऐसा करने के बाद इसे खींचें, और यह सबसे ज्यादा आइटम है। अब तक, बहुत अच्छा है, अगर आप पूरी तरह से डोम के भीतर काम कर रहे हैं।

लेकिन: मैं वास्तव में क्या करना चाहता हूं, जब भी कोई ऑब्जेक्ट / बबल ड्रैग किया जा रहा हो, वह स्वचालित रूप से होता है। डी 3 dragend() dragstart() और dragend() फ़ंक्शंस के लिए एक मॉडल प्रदान करता है जो हमें ड्रैगिंग प्रक्रिया के दौरान जो कुछ भी करना चाहते हैं, उसे करने के लिए हमें एक कथन एम्बेड करने की अनुमति देगा। और डी 3 d3.select(this) वाक्यविन्यास प्रदान करता है जो हमें वर्तमान में खींच रहे ऑब्जेक्ट / बबल के d3 के ऑब्जेक्ट प्रस्तुति तक पहुंचने की अनुमति देता है। लेकिन मैं उस बड़े पैमाने पर सरणी को कैसे बदल सकता हूं जो वे एक डोम तत्व के संदर्भ में लौटते हैं जिसे मैं सहभागिता कर सकता हूं - उदाहरण के लिए - इसे एसवीजी कंटेनर के अंत में ले जाएं, या डीओएम में अन्य संदर्भों को निष्पादित करें, जैसे फ़ॉर्म सबमिशन ?




Related