У меня есть элемент svg, и я пытаюсь сделать его отзывчивым. Код, который я использую, приведен ниже, но это не работает. Я не понимаю эту проблему.
var svg = d3.select('.chart')
.append('svg')
.attr('class', 'chart')
.attr("width", width + margin + margin)
.attr("height", height + margin + margin + 10 )
.attr("viewBox", "0 0 680 490")
.attr("preserveAspectRatio", "xMinYMin meet")
.append("g")
.attr("transform", "translate(" + margin + "," + margin +
")");
Я нашел решение. После меня работали. Спасибо, в любом случае :)
var svg = d3.select('.chart')
.classed("svg-container", true)
.append('svg')
.attr('class', 'chart')
.attr("viewBox", "0 0 680 490")
.attr("preserveAspectRatio", "xMinYMin meet")
.classed("svg-content-responsive", true)
.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")");
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}
Вы устанавливаете ширину и высоту там. Из опыта я знаю, что SVG с шириной и высотой очень трудно изменить размер. Я использую только окно просмотра и выполняю калибровку с помощью CSS.
Этот код будет запускаться только один раз и установить его размер на начальные значения высоты и ширины окна. Если вы хотите изменить размер окна при изменении размера окна, вам необходимо изменить его размер на событие window.onresize
.
window.onresize = function() {
// code to change svg element width/height here
}