Использование 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. Я ответил на аналогичный вопрос.
Мой ответ