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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

Answer 3

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