एक डी 3 का डेटा एसवीजी तत्व तक पहुंचने का तरीका

Question

तो मैं इस भव्य दृश्य के मेरे अपने संस्करण है कि d3 किया है बनाने के लिए कोशिश कर रहा हूँ:

http://mbostock.github.com/d3/talk/20111116/bundle.html

सभी मैं कर रहा हूँ मूल रूप से करने के लिए पूरे चार्ट बढ़ रहा है बाएं, और फिर दाईं ओर अलग-अलग रिश्ते प्रदर्शित करने की कोशिश कर रहे हैं, इसलिए हर बार जब आप बाईं ओर एक नाम पर होवर करते हैं, न केवल आप चार्ट पर विभिन्न प्रकार के कनेक्शन बदलते रंग देखते हैं, तो आप इन कनेक्शनों के नाम भी देखते हैं दायीं तरफ।

समस्या जो मैं कर रहा हूं कनेक्शन के वास्तविक नामों तक पहुंच रहा है। मैं जावास्क्रिप्ट के लिए नया हूं और डी 3 तक भी नया हूं, और इन एसवीजी तत्वों के वास्तविक नामों को कैसे पहुंचाया जा रहा है, इस बारे में समस्याएं आ रही हैं। अब तक मैं कोड की दो पंक्तियों का उपयोग कर कंसोल.लॉग() में कर रहा हूं:

var targetTest = d3.selectAll("path.link.target-" + d.key); 
console.log(targetTest); 

कंसोल में यह मुझे सभी एसवीजी वस्तुओं का एक लॉग देगा जो मुझे चाहिए, लेकिन यह मुझे तत्वों में से प्रत्येक के लिए पूरी जानकारी देता है। कुछ इस तरह:

0: SVGPathElement 
__data__: Object 
animatedNormalizedPathSegList: null 
animatedPathSegList: SVGPathSegList 
attributes: NamedNodeMap 
baseURI: "http://localhost/mbostock-d3- 544addb/examples/bundle2/bundle.html" 
childElementCount: 0 
childNodes: NodeList[0] 
className: SVGAnimatedString 
clientHeight: 0 
clientLeft: 0 
clientTop: 0 
clientWidth: 0 
dataset: DOMStringMap 
externalResourcesRequired: SVGAnimatedBoolean 
farthestViewportElement: SVGSVGElement 
firstChild: null 
firstElementChild: null 
id: "" 
lastChild: null 
lastElementChild: null 
localName: "path" 
namespaceURI: "http://www.w3.org/2000/svg" 
nearestViewportElement: SVGSVGElement 
nextElementSibling: SVGPathElement 
nextSibling: SVGPathElement 
nodeName: "path" 
nodeType: 1 
nodeValue: null 
normalizedPathSegList: null 
offsetHeight: 0 
__proto__: SVGPathElement 
length: 1 
parentNode: HTMLDocument 
__proto__: Array[0] 

डेटा मैं उपयोग करने के लिए कोशिश कर रहा हूँ का हिस्सा डेटा वस्तु है, जो तीन और ऑब्जेक्ट्स के भीतर है।

source: Object 
target: Object 
__proto__: Object 

स्रोत ऑब्जेक्ट के भीतर

, (जो कि मैं क्या उपयोग करने के लिए कोशिश कर रहा हूँ) एक क्षेत्र कुंजी नामित है, और इस क्षेत्र मैं

depth: 4 
imports: Array[9] 
key: "Interpolator" 
name: "flare.animate.interpolate.Interpolator" 
parent: Object 
size: 8746 
x: 40.62256809338521 
y: 180 

उपयोग करने के लिए मूल रूप से मैं कॉल करना चाहते हैं चाहते हैं एक दस्तावेज़.लिखें, या इसी तरह $ (# आईडी) .text() इस कुंजी पर है, लेकिन मैं केवल लगता है, एक समय में एक तत्व का उपयोग करने में सक्षम होना उर्फ ​​मैं

var target = d3.selectAll("path.link.target-" + d.key); 
var source = d3.selectAll("path.link.source-" + d.key); 
var imports = source.property("__data__").target.key; 
var exports = target.property("__data__").source.key; 

लेकिन इनमें से प्रत्येक का उपयोग कर रहा केवल मुझे एक नाम देगा, बल्कि एक पूर्ण सूची। उर्फ ​​जब मैं एक तत्व पर होवर करें, भले ही वह कई "आयात" या "निर्यात"

console.log(imports) 

है केवल मुझे एक समय में 1 नाम दे देंगे, भले ही मैं selectAll इस्तेमाल किया।

किसी भी मदद की बहुत सराहना की जाएगी! मुझे खेद है कि अगर सवाल थोड़ा उलझन में है, तो मैंने जितना संभव हो उतना विशिष्ट होने की कोशिश की, क्योंकि यह एक बहुत ही विशिष्ट सवाल है, लेकिन शायद मैं बहुत विस्तार से हो सकता हूं ... यदि यह संभव है। वैसे भी हाथ से धन्यवाद!

इसहाक

Answer 1

उपयोग eachsource और target चर पर हर मूल्य प्राप्त करने के कि वे सिर्फ पहली मान के बजाय वापस जाएँ।

var targets = d3.selectAll("path.link.target-" + d.key); 
var sources = d3.selectAll("path.link.source-" + d.key); 
var imports = []; 
var exports = []; 
targets.each(function(d) { 
    imports.push(d["source"].key); 
}); 
sources.each(function(d) { 
    exports.push(d["target"].key); 
}); 
console.log("Imports - " + imports); 
console.log("Exports - " + exports); 

यहां JSFiddle कार्रवाई में दिखा रहा है। मैंने उपरोक्त कोड mouseover फ़ंक्शन में जोड़ा है, जहां से हाइलाइटिंग की जाती है।

D3 तरीकों की तरह attr और style उपयोग each पर्दे के पीछे आप के लिए है, इसलिए नहीं है, लेकिन जब से तुम डेटा का उपयोग करने के लिए एक कस्टम समारोह का उपयोग कर रहे आप each उपयोग करने के लिए की आवश्यकता होगी।