0

このコードと説明:

基本的な SVG ビューポートを生成し、それを選択として使用しましょう。

 //Create the SVG Viewport selection
 var svgContainer = d3.select("body").append("svg")
                                      .attr("width", 400)
                                      .attr("height", 100);

 //Create the Scale we will use for the Axis
 var axisScale = d3.scale.linear()
                          .domain([0, 100])
                          .range([0, 400]);

//Create the Axis
var xAxis = d3.svg.axis()
                  .scale(axisScale);

先に進む前に、次の 3 つの点に注意してください。

SVG ビューポートの幅は 400 単位です 0 から 100 までの数値 (.domain([0, 100])) をビューポートの幅 (400 単位) にマッピングしたいので 、スケールの範囲を定義しますas .range([0, 400])

彼がスケールのドメインと範囲に何を入れるべきかをどのように考え出したかの背後にある合理性をまだ理解できませんか? 誰かがそれをもう少しうまく説明できますか？

4

1 に答える 1

1

D3 は、何らかのキャンバスにデータを投影できるようにするヘルパーを提供domainします。ドメインは入力を定義し、範囲は出力を定義します。range

各値が 0 ～ 100 の値のセットがあるとします。これがドメインであり、d3 で として表されますdomain([0, 100])。これらの値をグラフィカルに表示するとします。たとえば、svg 円として。値をピクセルに直接マップすることもできます (たとえば、値 10 は左 10 ピクセル、上 10 ピクセルに変換されます) が、SVG コンテナーは幅/高さ 100 ピクセルよりもはるかに大きいか、または小さい可能性があります。

利用可能なスペースを利用するには、範囲を定義します。幅 500 ピクセル、高さ 300 ピクセルの svg コンテナーの場合、範囲は[0, 500]スケール "x" と[0, 300]スケール "y" になります (左上隅からプロットする場合)。スケーリングされた値はこれらの範囲に収まります。

次に例を示します。

var scale = d3.scale.linear().domain([0, 100]).range([0, 500]);

scale(0);   // 0
scale(100); // 500
scale(50);  // 250

scale(-1);  // -5

参考文献：

于 2013-04-15T15:10:25.627 に答える