D3.js_javascript スキルにおける data()、enter()、exit() の問題の詳細な説明-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

D3.js_javascript スキルにおける data()、enter()、exit() の問題の詳細な説明

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:44 PM

D3 は広く使用されており、現在では主流のデータ視覚化ツールの 1 つとなっています。誰もが初めて d3.js に触れたとき、最も困難な部分は data()、enter()、および exit() の操作でした。

一定期間接してある程度の理解が得られたので、私の理解について簡単にお話したいと思います。

データ()

まず例を見てみましょう:

<body>
 <p></p>
 <p></p>
 <p></p>
</body>

実行コード:

d3.select("body").selectAll("p").data([1, 2, 3])

ここでは、data() を使用して、選択した DOM 要素にデータをバインドします。これにより、要素の幅の設定など、データに対して関連する操作を行うことができます。

表面上は何の変化も見られません。ただし、内部的には、対応する DOM 要素に __data__ 属性を追加します。これは document.getElementsByTagName("p")[0].__data__ を通じて確認できます。

enter() と exit()

これら 2 つの操作は、名前だけから何を行うかを推測するのが難しいため、混乱を招きます。

上記の data() の例では、DOM 要素とデータの数は同じです。しかし、それが異なる場合はどうすればよいでしょうか?

enter() と exit() は、この状況を処理するために使用されます。

enter()

DOM の数がデータの数より少ない場合、または DOM がまったくない場合、通常はプログラムに DOM の作成を支援させたいと考えます。

次の例では、DOM 要素を事前に提供しません:

<body>
</body>

まだ実行中:

d3.select("body").selectAll("p").data([1, 2, 3])

上記の例との違いは、上記の例では .style("width", "100px") などの操作を引き続き実行できることです。ただし、DOM 要素を選択していないため、最初にそれを作成する必要があるため、ここではそれを行うことはできません。

enter() は、データをバインドした後に DOM 要素の欠落部分を選択するために使用されます。足りない部分なのでどうやって選べばいいのかと疑問に思うかもしれません。ここで、少し想像力を働かせて、存在しないものを選択したと想像する必要があります。これを「仮想 DOM」または「プレースホルダー」と呼ぶことができます。

enter() は選択を行うだけで、必要な DOM 要素を実際に追加するわけではありません。したがって、通常は enter() の後に append() を使用して実際に DOM 要素を作成します。

これからは、d3.select("body").selectAll("p").data([1, 2, 3]).enter().append("p") を使用して、必要な DOM 要素。

入力の処理方法

十分な要素がない場合、通常のアプローチは、append() を使用して要素を追加することです。以下のコードを見てください:

<body> 
  <p></p> 
  <script> 
  var dataset = [3, 6, 9]; 
  var p = d3.select("body").selectAll("p"); 
//绑定数据后，分别获取update和enter部分 
  var update = p.data(dataset); 
  var enter = update.enter();   
//update部分的处理方法是直接修改内容 
  update.text( function(d){ return d; } ); 
//enter部分的处理方法是添加元素后再修改内容 
  enter.append("p") 
   .text(function(d){ return d; }); 
  </script> 
 </body>

この例では、body には p 要素が 1 つしかありませんが、データは 3 つあるため、enter 部分には 2 つの余分なデータが含まれています。冗長データを扱うメソッドがappend要素であり、それに相当します。処理後、本文には 3 つの p 要素があり、その内容は次のとおりです:

<p>3</p> 
<p>6</p> 
<p>9</p>

通常、サーバーからファイルを読み取った後、データは存在しますが、Web ページには要素がありません。これは D3 の非常に重要な機能です。つまり、空のセットを選択し、enter().append() を使用して要素を挿入できます。現在本文に p 要素がないと仮定して、次のコードを参照してください:

var dataset = [10,20,30,40,50]; 
var body = d3.select("body"); 
body.selectAll("p") //选择body中所有p，但由于没有p，所以选择了一个空集 
 .data(dataset)  //绑定dataset数组 
 .enter()   //返回enter部分 
 .append("p")  //添加p元素 
 .text(function(d){ return d; });

上記のコードでは、selectAll は空のセットを選択し、データをバインドします。選択セットが空であるため、data() によって返される更新部分は空です。次に、enter() と append() を呼び出して、各データに対応する要素 p が含まれるようにします。最後に、p 要素の内容を変更します。つまり、Enter 部分を処理する一般的な方法は、append() を使用して要素を追加することです。

終了()

enter() とは反対に、exit() は、データと比較して余分な DOM 要素を選択するために使用されます。

次の例では、もう 1 つの DOM 要素を提供します:

<body>
 <p></p>
 <p></p>
 <p></p>
 <p></p>
</body>

今回は蛇足なので分かりやすいですが、実際に存在する、つまり最後の

です。

さらにある場合は、.remove() を使用してこれらの要素を削除できます。コードは次のとおりです。

d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();

終了の処理方法

要素が多すぎて、それらに対応するデータがありません。このような要素の場合、通常のアプローチは、remove() を使用して要素を削除することです。本文に 5 つの p 要素があると仮定して、次のコードを参照してください:

var dataset = [10, 20, 30]; 
 var p = d3.select("body").selectAll("p"); 
//绑定数据之后，分别获取update部分和exit部分 
 var update = p.data(dataset); 
 var exit = update.exit(); 
//update的部分的处理方法是修改内容 
 update.text( function(d){ return d; } ); 
//exit部分的处理方法是删除 
 exit.remove();

このコードではexit部分を削除処理しています。削除後は、Web ページに冗長な p 要素はなくなります。

参考資料

「結合で考える」 - マイク・ボストック著

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

カスタムGoogle検索APIセットアップチュートリアルMar 04, 2025 am 01:06 AM

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。驚くほど簡単です！検索をyに制限することができます

例JSONファイルの例Mar 03, 2025 am 12:35 AM

この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。キー価値ペア表記を使用して、あらゆる種類を保存できます

独自のAjax Webアプリケーションを構築しますMar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

10 jQuery構文蛍光物Mar 02, 2025 am 12:32 AM

コードプレゼンテーションを強化する：開発者向けの10個の構文蛍光物ウェブサイトやブログでコードスニペットを共有することは、開発者にとって一般的な慣行です。適切な構文ハイライターを選択すると、読みやすさと視覚的な魅力を大幅に改善できます。 t

8見事なjQueryページレイアウトプラグインMar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

10 JavaScript＆JQuery MVCチュートリアルMar 02, 2025 am 01:16 AM

この記事では、JavaScriptとJQuery Model-View-Controller（MVC）フレームワークに関する10を超えるチュートリアルの厳選された選択を紹介します。これは、新年にWeb開発スキルを向上させるのに最適です。これらのチュートリアルは、Foundatioのさまざまなトピックをカバーしています

＆＃x27; this＆＃x27; JavaScriptで？Mar 04, 2025 am 01:15 AM

コアポイントこれは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call（）、apply（）、bind（）などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした

See all articles