D3 - 縮尺率の軸を設定する

Question

追加されたsvg要素のサイズがパーセントで設定されるように散布図を作成しようとしています（Xのピクセル数ではなく、画面の50％または100％を占めます）。

そして私は同様に、位置0と100の間になるようにスケーリングされ、同様にパーセントとして設定されている円とSVG要素を移入する：.attr('cx', function(d){return xScale(d[0]) + '%'})

このアプローチは、円位置を設定するために働きます、私は軸上で正しいスケーリングを得ることができません。私は彼らがtransform要素を介して設定されていると思うし、これは引数の一部として%を取ることを望んでいない。

完全な例で、ここのJSフィドルを参照してください：https://jsfiddle.net/s01pg3fa/5/

軸は全体のSVG要素を記入するように正しくスケールされていません。どのような入力をありがとう。あなたはSVGのクライアントのサイズを取得し、軸のスケールでそれを使用することができます

Answer 1

：

var svgClientSize = svg.node().getBoundingClientRect(); 

軸スケールでそれを使用する：この場合、

var xScale = d3.scaleLinear() 
      .domain([0, d3.max(data, function(d){return d[0]})]) 
      .range([padding,svgClientSize.width-padding]) 
var yScale = d3.scaleLinear() 
      .domain([0, d3.max(data, function(d){return d[1]})]) 
      .range([svgClientSize.height-padding,padding]) 

、あなたは必要ありません。なぜ `斧https://jsfiddle.net/q7xm8n73/1/