Как сделать изменчивый treemap d3 отзывчивым?

Question

Я пытаюсь создать отзывчивую версию zoomable treemap example. Что нужно добавить, чтобы treemap изменялся с помощью окна?

Когда я пытаюсь изменить treemap.size() в методе обновления на $(window).resize(), ничего не происходит.

Я устанавливаю svg на style="width: 100%; height: 100%", а svg изменяет размеры, но макет карты treemap нет. Я также пробовал использовать viewbox и preserveAspectRatioper this answer, и treemap выглядит изначально правильно, однако функция масштабирования больше не работает правильно, потому что макет treemap не знает своего правильного размера.

Answer 1

Один способ справиться с этим - Lars Kotthoff сказал, что вы можете перерисовать treemap.

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

Затем вы должны вызвать функцию zoomabletreemap() для события изменения размера окна с использованием JavaScript. Перед вызовом javascript вы также должны удалить старый график.

$(window).resize(function() { 
      var div = document.getElementById("my-svg-div"); //id of the div we are appending to the chart container to contain the svg 
      div.parentNode.removeChild(div); 
      ZoomableTreeMap(); 
      }); 

Here is the working example для того же я объяснил выше