Использование ViewBox для изменения размера svg в зависимости от размера окна
Я пытаюсь использовать ViewBox и preserveAspectRatio для автоматической настройки моего d3.svg.arc, когда размер окна изменился...
var svg = d3.select("#chart").append("svg")
.append("g")
.attr("viewBox", "0 0 700 500")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("transform", "translate(" + r + "," + r +") rotate(180) scale(-1, -1)");
Я немного смущен, почему это вообще не работает - я также попытался установить сохранение в "none" и удалить все установленные поля, которые у меня были. но все равно не повезло - любая помощь или совет будут оценены.
Вот пример: http://jsfiddle.net/xwZjN/53/
Ответы
Ответ 1
Вы применяете viewBox
и preserveAspectRatio
к элементу g
, они должны применяться к элементу svg
:
var svg = d3.select("#chart").append("svg")
.attr("viewBox", "0 0 700 500")
.attr("preserveAspectRatio", "xMinYMin meet")
.append("g")
.attr("transform", "translate(" + r + "," + r +") rotate(180) scale(-1, -1)");
Ответ 2
вы можете получить размер окна и установить соотношение сторон для svg. Я ответил на аналогичный вопрос.
Мой ответ