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

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

6 голосов
/ 26 января 2012

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

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

Если бы кто-то мог раскошелиться на это , чтобы продемонстрировать, это было бы здорово! Спасибо

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

Ответы [ 3 ]

13 голосов
/ 10 апреля 2012

Отличный вопрос. Чтобы ответить на него, я реализовал плагин D3 для искажения «рыбий глаз» . Это примерно основано на предыдущей работе в Flare и Sigma.js, которые, в свою очередь, основаны на работах Саркара и Брауна, «Графические виды графиков типа« рыбий глаз »» , CHI'92.

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

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

3 голосов
/ 08 апреля 2012

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

Но это не супер сложно сделать через d3. Вот мой пример jsfiddle . В основном вы делаете следующее:

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

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

1 голос
/ 07 апреля 2012

Чистый 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

...