डी 3/ग्राफजीएल बल निर्देशित नेटवर्क विज़ुअलाइज़ेशन के लिए मैग्निफायर प्रभाव?

Question

क्या D3 या GraphGL पुस्तकालयों का उपयोग करके एक बल-निर्देशित ग्राफ़ विज़ुअलाइज़ेशन में नोड्स पर होवर करते समय एक चिकनी एनिमेटेड आवर्धक प्रभाव (मैक ओएस एक्स पर डॉक के समान) बनाना संभव है?

बल-निर्देशित लेआउट को बनाए रखते हुए नोड्स को इसके आसपास के अन्य लोगों को विस्तार और विस्थापित करने की आवश्यकता होगी।

यदि कोई प्रदर्शन करने के लिए fork this कर सकता है, तो यह बहुत अच्छा होगा! धन्यवाद

ध्यान दें, यह this question

Answer 1

ग्रेट सवाल क्या देख रहे हैं। इसका उत्तर देने के लिए, मैंने के लिए D3 plugin लागू किया। यह मोटे तौर पर फ्लेयर और सिग्मा.जेएस में पिछले काम पर आधारित है, जो कि सरकार और ब्राउन, "Graphical Fisheye Views of Graphs", CHI'92 के काम के आधार पर बदले में हैं।

यहां मिसरेबल्स डेटासेट के साथ quick demo है। कोड के लिए स्रोत देखें। जब मेरे पास समय है तो मैं बाद में एक लेख लिखूंगा।

नोट: यह एक स्थिर बल लेआउट का उपयोग करता है; लेआउट की गणना स्टार्टअप पर की जाती है और बदलती नहीं है। मुझे लगता है कि यह शायद आप फिशिए विरूपण के संयोजन के साथ क्या चाहते हैं, या अन्यथा विरूपण गतिशील रूप से नोड्स को स्थानांतरित करने की आपकी क्षमता के साथ प्रतिस्पर्धा करेगा। लेकिन सिद्धांत रूप में उन्हें जोड़ना संभव है, अगर आप यही चाहते हैं।

Answer 2

शुद्ध सीएसएस यह कर सकते हैं यदि आप इसे स्वीकार करते हैं के रूप में एक सरल जूम से अलग है।

.app{ 
-webkit-transition-property:-webkit-transform; 
-moz-transition-property:-moz-transform; 
-transition-property:-transform; 
-webkit-transition-duration:.15s; 
-moz-transition-duration:.15s; 
-transition-duration:.15s; 
} 

.app:hover{ 
-webkit-transform:scaleX(1.2) scaleY(1.2); 
-moz-transform:scaleX(1.2) scaleY(1.2); 
-transform:scaleX(1.2) scaleY(1.2); 
} 

यह मेरी मुख पृष्ठ पर प्रयोग किया जाता है tuoxie.me

Answer 3

यदि आप शुद्ध सीएसएस के साथ ऐसा कर सकता है यह आश्चर्यजनक होगा, लेकिन दुर्भाग्य से यह विभिन्न एसवीजी तत्वों के लिए गुण (यानी, वृत्त) की तरह लग रहा नहीं कर रहे हैं सीएसएस के माध्यम से पहुंचा जा सकता है। विशेष रूप से 'त्रिज्या', लेकिन मुझे लगता है कि यह पूरी तरह से एसवीजी तत्व गुणों के लिए सच है।

लेकिन डी 3 के माध्यम से ऐसा करना मुश्किल नहीं है। यहां my example jsfiddle है। असल में आप निम्न कार्य करते हैं:

1. संक्रमण का उपयोग करें (इन्हें कैसे उपयोग करें सीखने के लिए Tutorial #2 देखें)। परिवर्तन करने के लिए मूल रूप से d3element.transition().delay(300).attr(...) करें।
2. 'उड़ा हुआ' सर्किलों को ओवरलैप करने से सर्वोत्तम रखने के लिए मैं force layout's charge सेटिंग को संशोधित करना चाहता था। मंडल बड़े होने पर प्रतिकूल ताकतों को बढ़ाएं।

उम्मीद है कि thats आप के लिए ...