D3js-array-api

提供：Dev Guides
移動先:案内、検索

D3.js-配列API

D3にはモジュールのコレクションが含まれています。 各モジュールを個別に使用することも、モジュールのコレクションを一緒に使用して操作を実行することもできます。 この章では、Array APIについて詳しく説明します。

配列とは何ですか？

配列には、同じタイプの要素の固定サイズの順次コレクションが含まれます。 配列はデータのコレクションを格納するために使用されますが、配列を同じタイプの変数のコレクションと考える方が便利な場合がよくあります。

APIの構成

以下のスクリプトを使用して、APIを簡単に構成できます。 

<script src = "https://d3js.org/d3-array.v1.min.js"></script>
<body>
   <script>
   </script>
</body>

配列統計APIメソッド

以下は、最も重要な配列統計APIメソッドの一部です。

  • d3.min（配列）
  • d3.max（配列）
  • d3.extent（配列）
  • d3.sum（配列）
  • d3.mean（配列）
  • d3.quantile（配列）
  • d3.variance（配列）
  • d3.deviation（配列）

これらのそれぞれについて詳しく説明します。

d3.min（配列）

自然順序を使用して、指定された配列の最小値を返します。

例-次のスクリプトを検討してください。 

<script>
   var data = [20,40,60,80,100];
   console.log(d3.min(data));
</script>

結果-上記のスクリプトは、コンソールの配列20の最小値を返します。

d3.max（配列）

指定された配列の最大値を返します。

例-次のスクリプトを検討してください。 

<script>
   var data = [20,40,60,80,100];
   console.log(d3.max(data));
</script>

結果-上記のスクリプトは、コンソールの配列（100）の最大値を返します。

d3.extent（配列）

指定された配列の最小値と最大値を返します。

例-次のスクリプトを検討してください。 

<script>
   var data = [20,40,60,80,100];
   console.log(d3.extent(data));
</script>

結果-上記のスクリプトはエクステント値[20,100]を返します。

d3.sum（配列）

指定された数値の配列の合計を返します。 配列が空の場合、0を返します。

例-以下を考慮してください。 

<script>
   var data = [20,40,60,80,100];
   console.log(d3.sum(data));
</script>

結果-上記のスクリプトは合計値300を返します。

d3.mean（配列）

指定された数値の配列の平均を返します。

例-以下を考慮してください。 

<script>
   var data = [20,40,60,80,100];
   console.log(d3.mean(data));
</script>

結果-上記のスクリプトは平均値を60として返します。 同様に、中央値を確認できます。

d3.quantile（配列）

指定された並べ替えられた数値配列のp分位数を返します。pは範囲[0、1]の数値です。 たとえば、中央値は、p = 0.5、p = 0.25での最初の四分位数、p = 0.75での3番目の四分位数を使用して計算できます。 この実装では、R-7メソッド、デフォルトのRプログラミング言語、およびExcelを使用します。

例-次の例を考えてください。 

var data = [20, 40, 60, 80, 100];
d3.quantile(data, 0);//output is 20
d3.quantile(data, 0.5);//output is 60
d3.quantile(data, 1);//output is 100

同様に、他の値を確認できます。

d3.variance（配列）

指定された数値の配列の分散を返します。

例-次のスクリプトを検討してください。 

<script>
   var data = [20,40,60,80,100];
   console.log(d3.variance(data));
</script>

結果-上記のスクリプトは分散値を1000として返します。

d3.deviation（配列）

指定された配列の標準偏差を返します。 配列の値が2つ未満の場合、未定義として返されます。

例-以下を考慮してください。 

<script>
   var data = [20,40,60,80,100];
   console.log(d3.deviation(data));
</script>

結果-上記のスクリプトは偏差値を31.622776601683793として返します。

例-上記のすべてのArray APIメソッドを、次のスクリプトを使用して実行します。 Webページの「配列」を作成し、それに次の変更を追加します。 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         var data = [20,40,60,80,100];
         console.log(d3.min(data));
         console.log(d3.max(data));
         console.log(d3.extent(data));
         console.log(d3.sum(data));
         console.log(d3.mean(data));
         console.log(d3.quantile(data,0.5));
         console.log(d3.variance(data));
         console.log(d3.deviation(data));
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

配列

配列検索APIメソッド

以下は、いくつかの重要な配列検索APIメソッドです。

  • d3.scan（配列）
  • d3.ascending（a、b）

これらの両方を詳細に理解しましょう。

d3.scan（配列）

このメソッドは、指定された配列の線形スキャンを実行するために使用されます。 指定したコンパレータに最小要素のインデックスを返します。 簡単な例を以下に定義します。

例- 

var array = [{one: 1}, {one: 10}];
console.log(d3.scan(array, function(a, b) { return a.one - b.one; }));//output is 0
console.log(d3.scan(array, function(a, b) { return b.one - a.one; }));//output is 1

d3.ascending（a、b）

このメソッドは、コンパレータ機能を実行するために使用されます。 次のように実装できます- 

function ascending(a, b) {
   return a < b ? -1 : a > b ? 1 : a > =  b ? 0 : NaN;
}

組み込みソート方法にコンパレータ関数が指定されていない場合、デフォルトの順序はアルファベット順です。 上記の関数は、aがbより小さい場合は-1、aがbより大きい場合は1、0を返します。

同様に、descending（a、b）メソッドを実行できます。 aがbより大きい場合は-1、aがbより小さい場合は1、または0を返します。 この関数は、逆自然順序を実行します。

例-

Webページ array_search を作成し、次の変更を加えます。 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         var array = [{one: 1}, {one: 10}];
         console.log(d3.scan(array, function(a, b) { return a.one - b.one; }));//0
         console.log(d3.scan(array, function(a, b) { return b.one - a.one; }));//1
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次の結果が表示されます。

配列変換API

以下は、最も顕著な配列変換APIメソッドの一部です。

  • d3.cross（a、b [、reducer]）
  • d3.merge（arrays）
  • d3.pairs（array [、reducer]）
  • d3.permute（配列、インデックス）
  • d3.zip（配列）

これらのそれぞれを詳細に理解しましょう。

d3.cross（a、b [、reducer]）

このメソッドは、指定された2つの配列aとbのデカルト積を返すために使用されます。 簡単な例を以下に定義します。 

d3.cross([10, 20], ["a", "b"]);//output is [[a"], [10, "b"], [20, "a"], [20, "b"]]

d3.merge（arrays）

このメソッドは配列をマージするために使用され、以下で定義されます。 

d3.merge([[output is [10, 20]

d3.pairs（array [、reducer]）

このメソッドは配列要素のペアリングに使用され、以下で定義されます。 

d3.pairs([10, 20, 30, 40]);//output is [[d3.permute(array, indexes)

This method is used to perform the permutation from specified array and indexes. You can also perform the values from an object into an array. It is explained below.

[source,prettyprint,notranslate]

var object = {fruit： "mango"、color： "yellow"}、fields = ["fruit"、 "color"]; d3.permute（object、fields）;//出力は「mango」「yellow」です 

==== d3.zip(arrays)

This method is used to return an array of arrays. If arrays contain only a single array, the returned array contains one-element arrays. If no argument is specified, then the returned array is empty. It is defined below.

[source,prettyprint,notranslate]

d3.zip（[10、20]、[30、40]）;//出力は[[例*-Webページ array_transform を作成し、次の変更を追加します。 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         console.log(d3.cross([10, 20], ["a", "b"]));
         console.log(d3.merge([[console.log(d3.pairs([10, 20, 30, 40]));
         var object = {fruit:"mango", color: "yellow"},
         fields = ["fruit", "color"];
         console.log(d3.permute(object, fields));
         console.log(d3.zip([10, 20], [30, 40]));
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

配列変換

「https://www.finddevguides.com/index.php?title=D3js-array-api&oldid=30296」から取得
Powered by MediaWiki