入門チュートリアル（VII章）のD3.js V5バージョン - 使用の規模

入門チュートリアルのD3.js v5のバージョン（第VII章）

非常に重要なことである、私たちは規模のd3.jsを理解することができますD3.jsスケールで - ？マッピング関係、範囲のドメインへのドメインからのマッピングとして（なぜそれのドメインと範囲はあなたが待っています私たちは、スケールは、多くの場合、（ドメインを使用した構築として、参照）、および範囲（）の二つの機能はもちろん、絶対的なものではなく、D3、スケールの多くの種類があります）

ここで、一般的に二次元のチュートリアルの場合に使用

リニアスケール
順序尺度
リニアスケール

連続可変範囲のためのドメインとドメイン

<BODY> 
<SCRIPT> VARのデータセット= [1.2、2.3、0.9、1.5、3.3 ];
 VARの分= d3.min（データセット）; // 取得最小VaRの最大値= d3.max（データセット）; //は、最大値を取得します値VAR scaleLinear = d3.scaleLinear（）
.domainを（[MIN、MAX]）
.Range（[ 0300 ]）; 
のdocument.write（ "scaleLinear（1）出力：" scaleLinear +（1。 ））; 
d3.select（ "ボディ"）のappend（" BR "）; // ラップ 
のdocument.write（" scaleLinear（2）出力： "+ scaleLinear（2 ））; 
d3.select（ "身体"）アペンド（" BR」）
ドキュメント.WRITE（ "scaleLinear（3.3）出力：「+ scaleLinear（3.3


））;
</スクリプト> 
</ BODY>

結果：

コード説明：

-var scaleLinear = d3.scaleLinear（）
.domainを（[MIN、MAX]）

.Range（[0300]）; [0.9,3.3]のマッピングである[0300]

-scaleLinear（3.3）は、出力300でマッピング関係によって知ることができるので、実際には、出力でもあります

順序尺度

ドメインドメインと範囲ドメインが離散的である、すなわち、配列

<BODY> 
<SCRIPT> VARの指数= [0,1,2,3,4 ]。
VaRの色= [ "赤"、 "青"、 "黄"、 "黒"、 "緑" ]。
VAR scaleOrdinal = d3.scaleOrdinal（）
.domainを（インデックス）
.range（色）。
document.write（ "scaleOrdinal（1）输出：" + scaleOrdinal（1 ））。
d3.select（ "本体"）（ "BR"）を追加。// 换行 
のdocument.write（ "scaleOrdinal（2）输出：" + scaleOrdinal（2 ））。
d3.select（ "本体"）（ "BR"を追加します。）。
document.write（ "scaleOrdinal（4）输出：" + scaleOrdinal（4 ））。
<

結果：

コード説明：

-var scaleOrdinal = d3.scaleOrdinal（）
.domainを（インデックス）

順序尺度を確立するステップと、.range（色）

前章のヒストグラムを作成するためのスケールを使用して、

<BODY> 
<SVG幅= "960"高さ= "600"> </ SVG> 
<スクリプト> VARのマージ= {上部60、底部60は、左：60、右：60 }
 VARのデータセットを= [2.5、2.1 、1.7、1.3、0.9 ]。// 定义一个线性比例尺VAR scaleLinear = d3.scaleLinear（）
.domainを（[ 0 、d3.max（データセット）]）
.range（[ 0300 ]）。VaRの SVG = d3.select（ "SVG" ）;
VaRの G = svg.append（ "G" ）
.ATTR（ "変換"、 "翻訳（" + marge.top + " "+ marge.left +"）" ）。VAR rectHeight = 30 ; 
グラム。









.enter（）
.append（ "RECT" ）
.ATTR（ "X"、20 ）
.ATTR（ "Y"、関数（D、I）{
 戻り私は* rectHeight; 
}）
.ATTR（ "幅"、機能を（ D）{
 戻り、scaleLinear（D）// 设置宽、并在这里使用比例尺
）} 
.ATTR（ "高さ"、rectHeight-5 ）
.ATTR（ "塗りつぶし"、 "青" ）。
</スクリプト> 
</ BODY>

結果：

コード説明：

-.attr（ "幅"、関数（D）{
scaleLinear（D）を返す; //本明細書とで使用される幅寸法を設定します

}）見つけることができる、我々はここでスケールを使用します

効果ブラウザ：ブラウズ効果をクリックします

ソースブラウザ：ソースブラウザをクリックしてください
----------------
免責事項：この記事では、元の記事CSDNブロガー「など数スター、夜明け」、およびCC 4.0 BY-SAの著作権契約、転載をたどるです元のソースと、この文へのリンクを含めてください。
オリジナルリンクします。https：//blog.csdn.net/qq_34414916/article/details/80029808

入門チュートリアル（VII章）のD3.js V5バージョン - 使用の規模

おすすめ