Как сделать график D3 отзывчивым?

Question

Мне нужно, чтобы моя диаграмма d3 js была адаптивной, т.е. масштабировала диаграмму, когда пользователь изменяет размеры окна.Я попытался с атрибутами SVG "viewbox" и "preserveaspectratio", но безуспешно.Вот моя скрипка

var svg = d3.select("#chart1").append("svg")
    .call(zoom)
    .attr("class", "chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);
    .attr('viewBox','0 0 '+Math.min(pWidth,height)+'       '+Math.min(pWidth,height))
.attr('preserveAspectRatio','xMinYMin');

Answer 1

Удалить атрибут width и height из svg элемента.

Добавить .attr('preserveAspectRatio','xMinYMin'); и .attr("viewBox", '0 0 ' + width + ' ' + height)

Соответствующий код:

var svg = d3.select("#chart1").append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", '0 0 ' + width + ' ' + height)
    .call(zoom)
    .attr("class", "chart")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");