تأثير المكبر لقوة D3/GraphGL الموجهة لتصور الشبكة؟

Question

هل من الممكن إنشاء تأثير مكبر متحرك سلس (على غرار Dock في نظام التشغيل Mac OS X) عند التمرير فوق العقد في تصور رسم بياني موجه بالقوة باستخدام D3 أو GraphGL المكتبات؟

ستحتاج العقد إلى التوسع وإزاحة العقد الأخرى حولها، مع الحفاظ على التخطيط الموجه بالقوة.

إذا كان شخص ما يستطيع شوكة هذا لإثبات ذلك، سيكون ذلك رائعًا!شكرًا

لاحظ أن هذا يختلف عن التكبير البسيط كما في هذا السؤال

Answer 1

سؤال عظيم.للإجابة عليه، قمت بتنفيذ أ البرنامج المساعد D3 ل تشويه عين السمكة.إنه يعتمد تقريبًا على العمل السابق في Flare وSigma.js، والذي يعتمد بدوره على عمل Sarkar وBrown، "مشاهدات عين السمكة الرسومية للرسوم البيانية", ، تشي'92.

وهنا أ عرض سريع مع مجموعة بيانات Misérables.عرض المصدر للكود.سأقوم بالكتابة في وقت لاحق اليوم عندما يكون لدي الوقت.

ملحوظة:يستخدم هذا تخطيط القوة الثابتة؛يتم حساب التخطيط عند بدء التشغيل ولا يتغير.أعتقد أن هذا هو على الأرجح ما تريده بالتزامن مع تشويه عين السمكة، وإلا فإن التشويه سيتنافس مع قدرتك على تحريك العقد ديناميكيًا.لكن من الناحية النظرية من الممكن الجمع بينهما، إذا كان هذا هو ما تريده.

Answer 2

سيكون من المدهش أن تتمكن من القيام بذلك باستخدام CSS خالصًا، ولكن لسوء الحظ يبدو أنه لا يمكن الوصول إلى سمات عناصر SVG المختلفة (على سبيل المثال، الدوائر) عبر CSS.على وجه التحديد "نصف القطر"، ولكن أعتقد أن هذا ينطبق على عدد كبير من خصائص عناصر SVG.

لكن ليس من الصعب جدًا القيام بذلك عبر d3.هنا المثال الخاص بي jsfiddle.في الأساس تقوم بما يلي:

1. استخدام التحولات (انظر البرنامج التعليمي رقم 2 لمعرفة كيفية استخدامها).في الأساس القيام ب d3element.transition().delay(300).attr(...) لإحداث التغييرات.
2. لمنع تداخل الدوائر "المنفوخة" ، كان أفضل ما يمكنني فعله هو تعديل ملف تهمة تخطيط القوة جلسة.زيادة القوى التنافرية عندما تكون الدوائر أكبر.

نأمل أن يكون هذا ما تبحث عنه...

Answer 3

يمكن لـ Pure Css القيام بذلك إذا قبلته.

.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