D3js-selections

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

D3.js-選択

選択は、D3.jsの中核概念の1つです。 CSSセレクターに基づいています。 Webページ内の1つ以上の要素を選択できます。 また、定義済みのデータセットとの関係で要素を変更、追加、または削除できます。 この章では、選択を使用してデータ視覚化を作成する方法を説明します。

D3.jsは、次の2つの方法を使用してHTMLページから要素を選択するのに役立ちます-

  • * select（）*-指定されたCSSセレクターに一致することにより、1つのDOM要素のみを選択します。 特定のCSSセレクターに複数の要素がある場合、最初の要素のみを選択します。
  • * selectAll（）*-指定されたCSSセレクターと一致することにより、すべてのDOM要素を選択します。 jQueryを使用した要素の選択に精通している場合、D3.jsセレクターはほぼ同じです。

それぞれの方法を詳しく見ていきましょう。

select（）メソッド

select（）メソッドは、CSSセレクターに基づいてHTML要素を選択します。 CSSセレクタでは、次の3つの方法でHTML要素を定義してアクセスすることができます-

  • HTML要素のタグ（例： div、h1、p、spanなど）
  • HTML要素のクラス名
  • HTML要素のID

例とともに実際に見てみましょう。

タグによる選択

TAGを使用してHTML要素を選択できます。 次の構文は、「div」タグ要素を選択するために使用されます。 

d3.select(“div”)

例-「select_by_tagl」ページを作成し、次の変更を追加します。 

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

   <body>
      <div>
         Hello World!
      </div>

      <script>
         alert(d3.select("div").text());
      </script>
   </body>
</html>

ブラウザを介してウェブページを要求すると、画面に次の出力が表示されます-

クラス名による選択

CSSクラスを使用してスタイル設定されたHTML要素は、次の構文を使用して選択できます。 

d3.select(“.<class name>”)

ウェブページ「select_by_classl」を作成し、次の変更を追加します- 

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>

      <script>
         alert(d3.select(".myclass").text());
      </script>
   </body>
</html>

ブラウザを介してウェブページを要求すると、画面に次の出力が表示されます-

IDによる選択

HTMLページのすべての要素には一意のIDが必要です。 この要素の一意のIDを使用して、以下に指定するselect（）メソッドを使用してアクセスできます。 

d3.select(“#<id of an element>”)

「select_by_idl」というWebページを作成し、次の変更を追加します。 

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

   <body>
      <div id = "hello">
         Hello World!
      </div>

      <script>
         alert(d3.select("#hello").text());
      </script>
   </body>
</html>

ブラウザを介してWebページを要求すると、画面に次の出力が表示されます。

DOM要素の追加

D3.jsを選択すると、既存のHTMLドキュメントに新しい要素を追加するための* append（）および text（）*メソッドが提供されます。 このセクションでは、DOM要素の追加について詳しく説明します。

append（）メソッド

append（）メソッドは、現在の選択範囲内の要素の最後の子として新しい要素を追加します。 このメソッドは、要素のスタイル、その属性、プロパティ、HTMLおよびテキストコンテンツを変更することもできます。

ウェブページ「select_and_appendl」を作成し、次の変更を追加します- 

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>

      <script>
         d3.select("div.myclass").append("span");
      </script>
   </body>
</html>

ブラウザからウェブページをリクエストすると、画面に次の出力が表示されます。

ここで、append（）メソッドは、以下に示すようにdivタグ内に新しいタグスパンを追加します- 

<div class = "myclass">
   Hello World!<span></span>
</div>

text（）メソッド

text（）メソッドは、選択/追加された要素のコンテンツを設定するために使用されます。 上記の例を変更して、次に示すようにtext（）メソッドを追加しましょう。 

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>

      <script>
         d3.select("div.myclass").append("span").text("from D3.js");
      </script>
   </body>
</html>

Webページを更新すると、次の応答が表示されます。

ここで、上記のスクリプトは連鎖操作を実行します。 D3.jsは* chain構文*と呼ばれる手法をスマートに採用しています。これは jQuery から認識できます。 メソッドをピリオドと連鎖させることにより、1行のコードで複数のアクションを実行できます。 速くて簡単です。 以下に示すように、同じスクリプトはチェーン構文なしでアクセスすることもできます。 

var body = d3.select("div.myclass");
var span = body.append("span");
span.text("from D3.js");

要素の変更

D3.jsには、選択した要素のコンテンツとスタイルを変更するためのさまざまなメソッド、* html（）、attr（）、および style（）*が用意されています。 この章で変更メソッドの使用方法を見てみましょう。

html（）メソッド

html（）メソッドは、選択/追加された要素のhtmlコンテンツを設定するために使用されます。

「select_and_add_htmll」というWebページを作成し、次のコードを追加します。 

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>

      <script>
         d3.select(".myclass")l("Hello World! <span>from D3.js</span>");
      </script>
   </body>
</html>

ブラウザを介してWebページを要求すると、画面に次の出力が表示されます。

attr（）メソッド

attr（）メソッドは、選択した要素の属性を追加または更新するために使用されます。 「select_and_modifyl」というWebページを作成し、次のコードを追加します。 

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>

      <script>
         d3.select(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

ブラウザを介してWebページを要求すると、画面に次の出力が表示されます。

style（）メソッド

style（）メソッドを使用して、選択した要素のスタイルプロパティを設定します。 「select_and_stylel」というWebページを作成し、次のコードを追加します。 

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>

      <script>
         d3.select(".myclass").style("color", "red");
      </script>
   </body>
</html>

ブラウザを介してWebページを要求すると、画面に次の出力が表示されます。

classed（）メソッド

classed（）メソッドは、HTML要素の「クラス」属性を設定するためにのみ使用されます。 なぜなら、1つのHTML要素に複数のクラスを含めることができるからです。クラスをHTML要素に割り当てる際には注意が必要です。 このメソッドは、要素上の1つまたは複数のクラスを処理する方法を知っており、パフォーマンスが向上します。

  • Add class -クラスを追加するには、クラス化されたメソッドの2番目のパラメーターをtrueに設定する必要があります。 以下に定義されています-
d3.select(".myclass").classed("myanotherclass", true);
  • Remove class -クラスを削除するには、クラス化されたメソッドの2番目のパラメーターをfalseに設定する必要があります。 以下に定義されています-
d3.select(".myclass").classed("myanotherclass", false);
  • クラスの確認-クラスの存在を確認するには、2番目のパラメーターを省略して、クエリしているクラス名を渡します。 これは、存在する場合はtrue、存在しない場合はfalseを返します。
d3.select(".myclass").classed("myanotherclass");

選択内のいずれかの要素にクラスがある場合、これはtrueを返します。 単一要素の選択には d3.select を使用します。

  • クラスの切り替え-クラスを反対の状態に切り替えるには、既に存在する場合は削除し、まだ存在しない場合は追加します。次のいずれかを実行できます。 +単一の要素の場合、コードは次のようになります-
var element = d3.select(".myclass")
element.classed("myanotherclass", !oneBar.classed("myanotherclass"));

selectAll（）メソッド

selectAll（）メソッドは、HTMLドキュメント内の複数の要素を選択するために使用されます。 selectメソッドは最初の要素を選択しますが、selectAllメソッドは特定のセレクター文字列に一致するすべての要素を選択します。 選択がどれにも一致しない場合、空の選択を返します。 selectAll（）メソッドでも、すべての追加変更メソッド、* append（）、html（）、text（）、attr（）、style（）、classed（）、*などを連鎖させることができます。 この場合、メソッドは一致するすべての要素に影響します。 新しいウェブページ「select_multiplel」を作成して次のスクリプトを追加して理解しましょう- 

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

   <body>
      <h2 class = "myclass">Message</h2>
      <div class = "myclass">
         Hello World!
      </div>

      <script>
         d3.selectAll(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

ブラウザを介してWebページを要求すると、画面に次の出力が表示されます。

ここでは、attr（）メソッドは div と* h2タグの両方に適用され、両方のタグのテキストの色は赤に変わります。

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