Я изо всех сил пытаюсь понять, как это сделать http://bl.ocks.org/mbostock/3750558 отзывчивый. Проблема в том, что у меня есть некоторые узлы с фиксированными координатами, я не уверен, как обращаться с ними при изменении ширины браузера (думаю, с помощью css translate?).D3 Sticky Force отзывчивый
ответ
Выполнение элемента svg отзывчиво независимо от того, какой тип элемента он есть, будь то силовая макет, линейная диаграмма или другой рендеринг на основе svg.
Вы можете использовать zoom-behavior
родной для d3 для изменения размера <g>
групп. Вы можете прагматически вызывать обработчики событий масштабирования при изменении размера окна, в вашем случае вам необходимо изменить размер в зависимости от размеров видовых экранов или других методов получения размера экрана.
Вы также можете быть заинтересованы в изменении размера графика фиксированной позиции (обернутого в элемент <g>
) на основе отношений ограничивающих полей между определенным родительским элементом и дочерним элементом svg. Вы можете проверить образцы использования ограничивающих полей here
- 1. отзывчивый график D3
- 2. Отзывчивый d3 пузырьковая диаграмма
- 3. Отзывчивый D3 js chart
- 4. Bootstrap 3 Sticky Footer (Wordpress Theme) Отзывчивый
- 5. d3 force nodes toggle
- 6. Пуск/остановка d3.force динамически
- 7. D3 force layout stable detect
- 8. D3 AngularJs Force Directed Graph
- 9. Constrained d3.js Force display
- 10. D3 v4 Force Simulation 'grouped'
- 11. D3 Force Drag вертикально обратный
- 12. d3 force направленный граф, ссылки не нарисованы
- 13. Зарядка на основе размера - d3 force layout
- 14. d3 force направленная компоновка - приоритет расстояния линии
- 15. d3.js force layout не запускается
- 16. D3 Force Directed Graph ajax update
- 17. Как добавить текст в макет d3 force?
- 18. D3 Force Layout: Настроить все на странице?
- 19. force graph in d3.js - исчезающие узлы
- 20. d3.js force cancel a drag event
- 21. D3 force layout исходный код фрагмента! Quad.leaf
- 22. Перемещение фиксированных узлов в макете d3 force
- 23. d3 force layout отталкивающий заряд формула
- 24. D3 Force Layout with Geom Hull
- 25. d3 force direct graph remove text cursor
- 26. Кривая линия на d3 force направленное дерево
- 27. автоматически генерирует ссылки в макете d3 force
- 28. D3 force layout by node size
- 29. добавить различные формы в d3 force layout
- 30. Максимальный предел расстояния для D3 Force Layout?
Я что-то пробовал, но он не работает 'd3.select (window) .on ('resize', resize); функция resize() { \t var w = $ (document) .width(); \t var h = $ (document) .height(); \t var z = d3.behavior.zoom (w, h); \t d3.select ("svg # logograph"). Call (z) } ' – alfredopacino