Какую библиотеку холста HTML5 я должен использовать для этой цели?

Question

Я новичок в HTML5 и Javascript, но мне нужно сделать визуализацию, используя их.

Вот мой домен/проблема:

1. мне нужно визуализировать большой набор узлов графа, визуально узел может быть цикл с цветами и прозрачностью.

2. Есть два отношения: включают и взаимодействуют.

3. include означает, что один узел включает в себя другие различные типы узлов, визуально, пользователи могут видеть большой узел с меньшими узлами внутри себя.

4. interact просто означает, что линия соединяет различные узлы. Строка должна иметь стрелку, метку (текст) и толщину.

5. Для эффектов, мне нужно анимация, такие как узлы не является статичной, но некоторые из них должны иметь анимацию плавающих вокруг (небольшое количество регулярного плавучее движения вокруг центра места); или некоторые узлы должны иметь эффект , как дыхание.

6. Пользователь может перетаскивать некоторые узлы, если перетаскивать узел, все подключенные узлы/граф должны перемещаться соответственно по мере их подключения.

7. Автоматическое обнаружение столкновения должно быть на месте. Кроме того, если происходит столкновение, все узлы должны следовать некоторым алгоритмам, чтобы хорошо распределить их.

---

Вот мои вопросы:

1. Какой холст библиотеки я должен использовать? Так как я новичок в любом случае, хороший простой, который соответствует моим потребностям, является лучшим.

2. Какой алгоритм следует искать для плавающей и импульсной (дыхательной) анимации?

3. Какой алгоритм следует использовать для перетаскивания узла, и все связанные узлы следуют как змея?

4. Какой алгоритм следует использовать для столкновений и распределения?

Благодаря

Answer 1

d3js

См упругая узел демку here и here, столкновение демо here. Эта страница содержит тонны d3js demos

Для easing effects вы можете посмотреть d3 transition.

Удачи вам!