D3.js - क्या बल-निर्देशित ग्राफ और नोड-लिंक पेड़ के बीच एनिमेट करना संभव है?

Question

मैं D3.js पुस्तकालय का उपयोग कर रहा है और बल निर्देशित ग्राफ डेमो को देखकर:

http://mbostock.github.com/d3/ex/force.html

मैं भी नोड लिंक पेड़ से देख रहा हूँ:

http://mbostock.github.com/d3/ex/tree.html

मैं करना चाहते हैं क्या है:

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

क्या किसी ने पहले ऐसा कुछ किया है, या लेने के लिए सबसे अच्छा तरीका है? मैं D3.js के लिए नया हूं और मुझे कोई जानकारी नहीं है कि यह ढांचे द्वारा समर्थित है या नहीं।

Answer 1

आपको क्या करना है बल को रोकना और मौजूदा लेआउट को दूसरे लेआउट से प्राप्त एक्स-वाई में बदलने के लिए लागू करना है। तो अपने समारोह इस प्रकार दिखाई देगा:

force.stop(); 
d3.selectAll("g.nodes").transtion().duration(500) 
    .attr("translate","transform("+newLayoutX+","+newLayoutY+")" 

फिर अपने नोड्स सरणी के माध्यम से पुनरावृति और नए X और Y प्रतिबिंबित करने के लिए x, y, px, py मूल्यों को निर्धारित।

https://gist.github.com/emeeks/4588962

यह नहीं करता है: इस बल लेआउट के लिए वर्तमान x और y स्थिति पता करने के लिए जब आप force.start()

चलाने आप इस उदाहरण में plotLayout() समारोह पर एक नज़र ले जा सकते हैं अपने नोड्स सेट हो जाएगा हालांकि, दूसरे d3.layout पर भरोसा करें। जिस समस्या में आप भाग लेंगे वह यह है कि आपको पेड़ लेआउट के लिए एक पदानुक्रमित डेटासेट की आवश्यकता होती है, जिसके लिए आपको पदानुक्रम लेआउट में अपेक्षित के रूप में अपने नोड्स को बदलने और डेटा को node.children की सरणी में बदलने की आवश्यकता होती है। जिस तरह से मैं इसे करता हूं वह डेटासेट को डुप्लिकेट करना और मैन्युअल रूप से इसे फ़्लैट करना है, लेकिन एक और अधिक सुरुचिपूर्ण समाधान हो सकता है जिसे मैं अनजान हूं।