2015-10-17 4 views
0

Я изо всех сил пытаюсь понять, как это сделать http://bl.ocks.org/mbostock/3750558 отзывчивый. Проблема в том, что у меня есть некоторые узлы с фиксированными координатами, я не уверен, как обращаться с ними при изменении ширины браузера (думаю, с помощью css translate?).D3 Sticky Force отзывчивый

ответ

1

Выполнение элемента svg отзывчиво независимо от того, какой тип элемента он есть, будь то силовая макет, линейная диаграмма или другой рендеринг на основе svg.

Вы можете использовать zoom-behavior родной для d3 для изменения размера <g> групп. Вы можете прагматически вызывать обработчики событий масштабирования при изменении размера окна, в вашем случае вам необходимо изменить размер в зависимости от размеров видовых экранов или других методов получения размера экрана.

Вы также можете быть заинтересованы в изменении размера графика фиксированной позиции (обернутого в элемент <g>) на основе отношений ограничивающих полей между определенным родительским элементом и дочерним элементом svg. Вы можете проверить образцы использования ограничивающих полей here

+0

Я что-то пробовал, но он не работает '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