Rectjs с d3js treemap

Question

Попытка преобразовать Mike Bostock's's Zoomable TREEWAP в компоненты реагирования. Часть пути там, но не уверена в лучшем способе передачи данных между компонентами, когда эти данные зависят от отображения DOM (I.E. ширины).

наступил через Ben Smith's Блог Смешивание реагирования и D3JS. Отличные вещи.

Использование Bootstrap для управления стилью CSS. Определил элемент SVG с абсолютной позицией и максимальной шириной (100%) внутри относительного контейнера:

 .svg-container {
   position: relative;
   padding-bottom: 30%;
   overflow: hidden;
   }

 .svg-content {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 } 

.

Таким образом, ширина элемента SVG меняется, когда экран изменяется. Предполагая, что атрибуты узла TREEWAP, такие как x, y, dx, dy, должны исправить значения, а не закумы. Думая, что я должен посмотреть событие в размерах окна, вытекайте новые размеры элемента SVG («Parсент (D3.Select ('. SVG-Content»). Стиль («ширина»), 10); «) и Force ReactJS -Render («React.renderComponent»).

Answer 1

У вас есть два варианта:

.

• дают текущую высоту и ширину к макету TREEWAP и пересчитывать TREEWAP каждый раз, когда изменение высоты и ширины; или,

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

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

О, и я боюсь, что parseInt(d3.select('.svg-content').style('width'), 10); не будет делать то, что вы надеетесь, что возвращает линейные стили. Вам нужно будет захватить вычисленную ширину. Есть несколько примеров того, как сделать это в конце Это длительный ответ на масштабирование .