メニュー

D3.js API関数–例を含むチュートリアル

d3 js api functions tutorial with examples

問題を排除するために楽器を試してください

このチュートリアルでは、データバインディング、結合、データの読み込みと解析、補間などの機能を追加するためのさまざまなD3.jsAPI関数について説明します。

D3.jsは、データバインディング、結合、CSV、XML、JSON形式の外部データの読み込みと解析、ランダムな数値の操作、補間、テキストなどのエキサイティングな機能を追加するさまざまなAPI関数で構成されるオープンソースのJavaScriptデータ視覚化ライブラリです。データの視覚化のためのアニメーション、遷移、グラフ形成などのさまざまな機能に加えて、フォーマットと国際化。

C ++は何に使用されますか？

これに関する以前のチュートリアルを参照できます d3シリーズ その機能、利点、および前提条件について詳しく知るため。

D3.jsのAPI関数

学習内容：

D3.jsを使用したデータバインディング

チャートやグラフなどのデータ視覚化を作成するには、データをDOM要素にバインドまたは結合する必要があります。

データは、以下に示すように、同じタイプの数値を含むコンテナーである配列にすることができます。

var data = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5)

最初のステップはSVGオブジェクトを作成することです。外部データのデータ視覚化を構築するための平面またはフレームワークを作成するために、HTML要素をd3.select（）で選択し、属性を追加することでキャンバスとして機能するSVGを追加します。キャンバスの幅や高さなど。

var svg = d3.select(HTML element like body or div) .attr(width, value from variable for width) .attr(height, value from variable for height)

次のステップは、他のSVG要素を含むグループのように機能するSVG要素「g」の挿入です。

svg.selectAll ('g')

さらに、.data（data）関数を使用して、キャンバスに添付されたこのSVGシェイプにデータをバインドまたは結合します。

svg.selectAll ('g').data(data)

次のステップは、.enter（）メソッドを使用して.data（data）関数にデータをDOM要素にバインドすることです。

svg.selectAll ('g').data(data).enter()

さらに、SVGシェイプを追加して、シェイプをキャンバスにアタッチできるようにします。

svg.selectAll ('g') . data(data).enter().append('g')

データバインディングの例を以下に示します。

var infoset = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5) var span = 500, ceil = 500; var scalespan = d3.scaleLinear() .domain((0, d3.max(infoset))) .range((0, 400)); var screen = d3.select('body').append('svg') .attr('width', span) .attr('height', ceil) .append('g').attr('transform', 'translate(5,20)'); var rule = screen.selectAll('rect') .data(infoset).enter() .append('rect') .attr('width', function(d){ return scalespan(d);}) .attr('height', 20) .attr('y', function(d, i){ return i*25; }) .attr('fill', '#b3ccff'); screen.selectAll('text') .data(infoset).enter().append('text') .attr('y', function(d, i){ return i*25; }) .attr('x', function(d){ return scalespan(d);}) .text(function(d) {return d;}) .attr('fill', 'blue').attr('dy','.85em'); D3.jsでのデータの結合、読み込み、解析
出力は、データバインディングを使用した座標のグラフィック形式でキャプチャされます

データをバインドするために、これは私たちの場合、大陸ごとの人口密度です

var infoset = (59.5、17.2、9.6、7.6、5.5、0.5)

可変画面は、この場合は本体であるhtml要素にSVGシェイプをアタッチすることにより、描画領域に割り当てられます。

可変スケールスパンは、グラフをプロットしてスケール上の値をグラフ形式で表示するために、ドメインおよび範囲パラメーターを持つscaleLinear（）関数を取ります。

.data（infoset）.enter（）は、変数Infosetに割り当てられたデータセットをバインドするのに役立ちます。

データセット内の値に対応するさまざまな長さの長方形に対して値をプロットするために、テキストが追加されます。

D3.jsでのデータの結合、読み込み、解析

D3.jsは、外部データをロードするか、さまざまなタイプのファイルから変数にローカルにロードして、このデータをDOM要素にバインドできます。

データのさまざまな形式はCSV、JSON、TSV、およびXMLですが、d3.csv（）、d3.JSON（）、d3.tsv（）、およびd3.xml（）は、さまざまなデータファイルをロードするために提供されるそれぞれのメソッドです。指定されたURLにhttpリクエストを送信して、それぞれの形式のファイルまたはデータをロードし、解析されたそれぞれのデータオブジェクトを使用してコールバック関数を実行することにより、外部ソースからの形式。

デフォルトのロケール
上記のように、さまざまな形式の外部データを表示できます。

CSVデータファイルをロードするための構文は次のとおりです。

d3.csv (url (, row, callback));

＃1） 上記の最初のパラメータurlは、d3.csv関数によってロードされる外部ファイルであるcsvファイルのURLまたはサーバーパスです。私たちの場合、それは

http：// localhost：8080 / examples / movie_published.csv

＃二） 2番目のパラメーターはオプションです

＃3） 3番目のパラメーターはコールバックです。これは別の関数から引数として渡すことができる関数であり、ファイルのJSON、TSV、およびXML形式の別のコードの実行が完了するまで特定のコードが実行されるようにします。関数d3.csvは次のとおりです。それぞれd3.json、d3.tsv、およびd3.xmlに置き換えられました。

外部データを解析する例を以下に示します。

d3.csv('movie_published.csv', function(data) { console.log(data); });
d3.csv（）は、上記のようにCSVファイルをロードします。

Google Chromeブラウザで開いた場合、F12をクリックすると、ページの更新により、コードのコンソールログが表示されます。この場合はconsole.log（data）で、データセットの値が列見出し、movie_name、yearで表示されます。サーバーの場所に保存されているCSVファイルから表示されます。

D3.jsでの乱数の操作

d3 –ランダムAPIメソッドは、さまざまな確率分布から乱数を返します。これは数学関数であり、さまざまな結果が発生する可能性を計算します。

これらの関数は主に数学を使用します。指定された範囲の最小数と最大数の間にある数を生成するJavaScriptのランダム関数は、数学のたびに一意の数になります。ランダム関数が実行されます。

  • d3.randomUniform –一様分布から乱数を生成します。 例えば。 d3.randomUniform（1、2）（）– 1を含み2未満の乱数を返します。
  • d3.randomNormal –正規分布から乱数を生成します。 例えば。 d3.randomNormal（1、2）（）–指定された最小値と最大値の間にある整数を返します。
  • d3.randomLogNormal –対数正規分布から乱数を生成します。期待値は、確率変数の自然対数値になります。
  • d3.randomBates –独立変数を使用して、ベイツ分布から乱数を生成します。
  • d3.randomIrwinHall – Irwin–Hall分布から乱数を生成します。
  • d3.randomExponential –指数分布から乱数を生成します。

d3のランダム関数の例

Random Functions in d3

Random Functions in d3

document.write(d3.randomUniform(1, 2)() +'

'); document.write(d3.randomNormal(1, 2)()+'

'); document.write(d3.randomLogNormal(1, 2)()+'

'); document.write(d3.randomBates(1, 2)()+'

'); document.write(d3.randomIrwinHall(1, 2)()+'

'); document.write(d3.randomExponential(1, 2)()+'

');

d3ランダムメソッドの出力が表示されます

D3.jsでの補間

2つのランダムな値の間を補間するために適用されるAPIメソッドは、終了値bのタイプによって異なります。一般的な構文は次のとおりです。 d3。補間（a、b）。 以下に、終了値bのデータ型と、データ型ごとに変更される対応するメソッドまたは関数をリストした表を示します。

最終値のタイプb使用したメソッド名
bがジェネリック配列の場合interpolateArray（）
bがブール値、null、または未定義の場合定数bが使用されます
bが数値の場合interpolateNumber（）
bが色を参照する色または文字列の場合interpolateRgb（）
bが日付の場合interpolateDate（）
bが文字列の場合interpolateString（）
bが数値の型付き配列の場合interpolateNumberArray（）
bが番号を参照している場合interpolateNumber（）
そうでなければinterpolateObject（）

以下の例で説明します。

  • d3.interpolateNumber（）関数（開始値として10、終了値を20）表示される値の範囲は、（0.0）から（0.5）から（1.0）までの補間パラメーターの開始値10から終了値20までです。
  • d3.interpolateRgb（）関数は、2つの異なる色名に対して、結果として対応するrgb（ ‘r’、 ’g’、 ’b’）値を生成し、（0.0）から（0.5）から（1.0）までのパラメーターを補間します。
  • 「yyyy-mm-ddhh：mm：ss」の形式の2つの異なる日付のd3.interpolateDate（）関数は、（0.0）から（1.0）までのパラメーターを補間するために、上記の日付範囲の間の日付を表示します。

範囲間の数値、色、および日付の補間の例を以下に示します。

Interpolate Numbers, Colors and Dates

var inpolat = d3.interpolateNumber(99,100); document.write(inpolat(0.0) + '

'); document.write(inpolat(0.2)+ '

'); document.write(inpolat(0.5) + '

'); document.write(inpolat(1.0)+ '

'); var inpolcolrs = d3.interpolateRgb('yellow', 'aquamarine'); document.write(inpolcolrs(0.0)+ '

'); document.write(inpolcolrs(0.2)+ '

'); document.write(inpolcolrs(0.5)+ '

'); document.write(inpolcolrs(0.8)+ '

'); document.write(inpolcolrs(1.0)+ '

'); var inpoldates = d3.interpolateDate(new Date('2020-01-01 00:00:00'), new Date('2020-01-15 23:59:59')); document.write(inpoldates(0.0)+ '

'); document.write(inpoldates(0.2)+ '

'); document.write(inpoldates(0.5)+ '

'); document.write(inpoldates(0.8)+ '

'); document.write(inpoldates(1.0)+ '

');

数値と色のD3.jsでの補間

D3.jsによるテキストのフォーマットと国際化

テキストのフォーマットとローカリゼーションは、以下に例を示して説明するように、数値フォーマット、日付フォーマット、およびロケール関数を使用してD3.jsで実現できます。

D3-ローカル（）

d3.locale（definition）は、定義に固有​​のロケールを返します。デフォルトでは、ロケール定義はd3.locale（definition）の米国英語です。

Android用の無料mp3曲ダウンロードアプリ

ロケール定義の数値フォーマットのプロパティを以下に示します。

  • 10進数： 小数点は通常、25.75（ 例えば。 '。'）。
  • 数千： Thousandは、2,475（2,475のような1000の値の後にコンマとして使用される識別子または区切り文字です 例えば。 '、'）。
  • グループ化： すべてのグループの配列のグループとサイズは、Arrayname (5)を使用して確認できます。ここで、5はインデックスで、配列サイズは6メンバーです。
  • 通貨： 通貨文字列のプレフィックスとサフィックス（ 例えば。 ('$'、 '')）。
  • 日付時刻： 日付と時刻（％c）形式には、日付と時刻（ 例えば。 '％A％b％e％X％Y'）。
  • 日付： 日付（％x）（ 例えば。 「％m /％d /％Y」）月日と年のフォーマット文字列。
  • 時間： 時間（％X）（ 例えば。 「％H：％M：％S」）フォーマット文字列（時、分、秒）。
  • 期間： ロケールの午前と午後同等物（ 例えば。 ('午前午後')）。
  • 日々： 日曜日から始まる曜日（アルファベット順）。
  • shortDays： 日曜日から始まる平日の短い日またはSUN、MONなどの省略名。
  • 月： 月のフルネームは10月（1月から）。
  • shortMonths： 短い月、または月のJAN、FEB、MARなどの省略名（1月から開始）。

上で説明したすべてのパラメーターは、次の画像にそれぞれの値を持つ変数として表示されています。

デフォルトのロケールはen_USで、ロシア語のロケール（ru_RU）には日付、時刻、間隔の定数があります。

D3.format

JavaScriptライブラリのd3.formatは入力引数として数値を取り、構文はd3.format（specifier）です。数値を変換するために、d3.formatが使用されます。

d3に基づくフォーマットの適用例を以下に示します。

Formatting for currency body {padding: 50px; font: 16px Courier;} p { color:blue; font-size: 16px; font-weight: bold;} var body = d3.select('body'); var comafmt = d3.format(','), decimalfmt = d3.format('.1f'), comadecimalfmt = d3.format(',.2f'), suffixfmt = d3.format('s'), suffixfmtDecimal1 = d3.format('.1s'), suffixfmtDecimal2 = d3.format('.2s'), rupiemoneyfmt = function(d) { return 'Rs ' + comadecimalfmt(d); }, intmoneyfmt = function(d) { return '$ ' + comadecimalfmt(d); }, euromoneyfmt= function(d) { return '€ ' + comadecimalfmt(d); }, percentfmt = d3.format(',.2%'); var number = 27500; body.append('p').text('Number used for formatting is : ' + number).style('font-weight', 'bold'); body.append('p').text(function() { return 'Indian Rupee format of above Number : ' + rupiemoneyfmt(number); }); body.append('p').text(function() { return 'International Currency format will be : ' + intmoneyfmt(number); }); body.append('p').text(function() { return 'Euro Currency format will be : ' + euromoneyfmt(number); }); body.append('p').text(function() { return 'Percent format : ' + percentfmt(number); }); body.append('p').text(function() { return 'Suffix for large number : ' + suffixfmt(number); }); body.append('p').text(function() { return 'Round off ceil number: ' + suffixfmtDecimal1(number); }); body.append('p').text(function() { return 'Round off floor number : ' + suffixfmtDecimal2(number); }); body.append('p').text(function() { return 'Comma for large number: ' + comafmt(number); }); body.append('p').text(function() { return 'One decimal format : ' + decimalfmt(number); }); body.append('p').text(function() { return 'Two decimal format : ' + comadecimalfmt(number); });
d3.formatを使用して数値と通貨に適用されるフォーマット

D3.jsを使用した日付形式での変更

D3.jsライブラリを使用した時間フォーマット。d3.timeParseはワイルドカード文字、つまり入力時間フォーマットを目的のフォーマットに変換するのに役立つ正規表現を使用して適用できます。

時刻と日付に関連する形式の例を以下に示します。

body {font-family: Arial, Helvetica, sans-serif; color: blue;} var datetimefmt = d3.timeFormat('%d-%m-%Y %H:%M:%S %p'); document.write(datetimefmt(new Date()) +'

'); var timePortion = d3.timeFormat('%H:%M:%S %p'); document.write(timePortion(new Date()) +'

'); var datePortion = d3.timeFormat('%B %d, %Y'); document.write(datePortion(new Date())+'

'); var datefmt = d3.timeFormat(' %d'); document.write(datefmt(new Date())+'

'); var dayfmt = d3.timeFormat('%A '); document.write(dayfmt(new Date())+'

'); var monfmt = d3.timeFormat('%B'); document.write(monfmt(new Date()) +'

');

日付と時刻の形式の説明

結論

このチュートリアルでは、データバインディングのような、D3.jsの残りのすべての重要なメソッドについて説明しました。この場合、データは配列、結合、読み込み、解析の形式でCSV、JSON、XML形式になります。

また、チャートまたはグラフでデータグループを視覚化し、数値、日付、時刻、およびさまざまなロケール通貨に対してd3.localeメソッドを使用してテキストとローカリゼーションをフォーマットするために、ランダムな数値と補間メソッドを使用した操作についても説明しました。

推奨読書

^