web-dev-qa-db-ja.com

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)");

なぜそれがまったく機能しないのか少し混乱しています-私はまた、保存を「なし」に設定し、設定されたマージンを削除しようとしました。それでもまだ運がありません-助けやアドバイスをいただければ幸いです。

次に例を示します。 http://jsfiddle.net/xwZjN/53/

javascriptsvgd3.js
16
Jose

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)");
27
methodofaction