Эффект лупы для визуализации визуальной силы направленной сети D3/GraphGL?

Question

Возможно ли создать плавный анимированный увеличительный эффект (аналогичный док-станции на Mac OS X) при наведении курсора на узлы в визуализации с помощью направленного графика с использованием библиотек D3 или GraphGL?

Узлы должны будут расширяться и перемещать другие вокруг него, сохраняя при этом направленную на усиление схему.

Если кто-то может fork this продемонстрировать, что было бы здорово! Благодаря

обратите внимание, что это отличается от простого масштабирования, как в this question

Answer 1

большой вопрос. Чтобы ответить на этот вопрос, я внедрил D3 plugin для fisheye distortion. Это примерно основано на предыдущих работах в Flare и Sigma.js, которые, в свою очередь, основаны на работе Саркара и Брауна, "Graphical Fisheye Views of Graphs", CHI'92.

Вот quick demo с набором данных Misérables. Просмотрите исходный код. Я напишу позже, когда у меня будет время.

Примечание: здесь используется схема статической силы; макет вычисляется при запуске и не изменяется. Я думаю, что это, вероятно, то, что вы хотите в сочетании с искажениями рыбий глаз, иначе искажение будет конкурировать с вашей способностью динамически перемещать узлы. Но теоретически их можно комбинировать, если это то, что вы хотите.

Answer 2

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

Answer 3

Было бы удивительно, если вы могли бы сделать это с чистым CSS, но, к сожалению, это выглядит как атрибуты для различных элементов SVG (т.е. кружки) не являются доступный через CSS. В частности, «радиус», но я думаю, что это верно для целого множества свойств элемента SVG.

Но его не очень сложно сделать через d3. Вот my example jsfiddle. В основном вы делаете следующее:

1. Используйте переходы (см. Tutorial #2, чтобы узнать, как их использовать). В основном делайте d3element.transition().delay(300).attr(...), чтобы изменения произошли.
2. Для того, чтобы круги «взорвались» перекрывали лучшее, что я мог найти, это изменить настройку force layout's charge. Увеличение силы отталкивания, когда круги больше.

Надеюсь, тот, что вы ищете ...