d3js: размер элемента Svg не изменяется при изменении размера окна

1

У меня есть элемент 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 + 
 ")");
Теги:
d3.js
responsive

3 ответа

0
Лучший ответ

Я нашел решение. После меня работали. Спасибо, в любом случае :)

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;
}
1

Вы устанавливаете ширину и высоту там. Из опыта я знаю, что SVG с шириной и высотой очень трудно изменить размер. Я использую только окно просмотра и выполняю калибровку с помощью CSS.

1

Этот код будет запускаться только один раз и установить его размер на начальные значения высоты и ширины окна. Если вы хотите изменить размер окна при изменении размера окна, вам необходимо изменить его размер на событие window.onresize.

window.onresize = function() {
    // code to change svg element width/height here
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню