第1のデータがd3.js

スニペット1第1のデータがd3.js

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>D3 Test</title> 
 
    <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> 
 
</head> 
 

 
<body> 
 
    <script type="text/javascript"> 
 
    var data = []; 
 
    for (i = 0; i < 3; i += 1) { 
 
     data.push(i); 
 
    } 
 
    d3.select('body') 
 
     // .selectAll('p') 
 
     .data(data) 
 
     .enter() 
 
     .append('p') 
 
     .text(function(d) { 
 
     return d; 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

スニペット2

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>D3 Test</title> 
 
    <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> 
 
</head> 
 

 
<body> 
 
    <script type="text/javascript"> 
 
    var data = []; 
 
    for (i = 0; i < 3; i += 1) { 
 
     data.push(i); 
 
    } 
 
    d3.select('body') 
 
     .selectAll('p') 
 
     .data(data) 
 
     .enter() 
 
     .append('p') 
 
     .text(function(d) { 
 
     return d; 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

でのSelectAllを使用せずに無視されます

コード.selectAll('p')が最初のスニペットにコメントされています。私はなぜその理由のために最初のデータが無視されるのか理解できませんでした。

私は.selectAll('p')戻って私のHTMLに空の選択をpタグを持っていないとpが私のデータ数ごとに追加されるよう、d3.jsと私は理解する初心者です。

ありがとうございます。

出典

2016-08-07 Ayan

何が起こったのか理解するためには、何が「入力」選択であるかを理解する必要があります。この記事の一番下にある例では、「入力」の選択と、文書に<p>がない場合でも、2番目のスニペットでselectAll("p")にしなければならない理由を簡単に説明しています。

さあ、あなたのスニペットを見てみましょう：

あなたの最初のスニペット：あなたの最初のスニペットで

、dataが[0, 1, 2]です。だから、あなたは3つの要素を持っています。本文を選択すると、明らかにDOMにbodyがあります。したがって、最初のデータム（0）をこの要素（ボディ）に関連付けます。これで、DOM要素に関連付けられていない2つのデータ（1と2）が作成されました。これらの2つのデータはあなたの「入力」選択です。 <p>を追加すると、入力選択には2つの番号しかありません。 2番目のスニペットで

あなたの第二のスニペット

、データが再び[0, 1, 2]です。違いは今すべて<p> ...を選択することですが、何もありません。これはリンク先の例の「プレースホルダ」です。 DOMには、0,1、2という3つのデータがすべて含まれています。これは、DOMに<p>が存在しないためです。

私は一例で書いたように：

をあなたの「入力」を選択して、あなたが存在していない、あなたの「入力」の選択は、常にすべてのデータが含まれています何かを選択した場合。

入力の選択は何の選択を "入力"

のプレースホルダの役割？ D3.jsで

一つはDOM要素にデータを結合する場合、3つの状況が考えられます

要素の数とデータ点の数は同じです。
データポイントよりも多くの要素があります。
要素よりも多くのデータポイントがあります。

対応するDOM要素のないすべてのデータポイントはに属し、を入力します。したがって、D3.jsでと入力します。の選択肢は、要素をデータに結合した後、DOM要素と一致しないすべてのデータを含む選択項目です。を入力してappend関数を使用すると、D3はそのデータをバインドする新しい要素を作成します。

これは、DOM要素のデータポイント/数の数についての可能な状況を説明するベン図である。

我々が見ることができるように、が選択を入力し、左の青色領域であります：対応するDOM要素のないデータポイント。 ; DOM内の要素を選択：

selectAll：

通常入力選択の構造、は選択は、これらの4つのステップを有する入力します
data：データをカウントして解析します。
enter：選択とデータを比較すると、新しい要素が作成されます。

append：DOMに実際の要素を追加します。

var data = [40, 80, 150, 160, 230, 260]; 

var body = d3.select("body"); 

var divs = body.selectAll("div") 
    .data(data) 
    .enter() 
    .append("div"); 

divs.style("width", function(d) { return d + "px"; }) 
    .attr("class", "divchart") 
    .text(function(d) { return d; });

そして、これが結果（jsfiddle here）です：

ていることに注意してください。これは非常に基本的な例（var divsでは4つのステップを見て）である

この例では、 "Enter"選択変数の最初の行にselectAll("div")を使用しました。 6つの値を持つデータセットがあり、D3は6つのdivを作成しました。

プレースホルダ

しかし、我々はすでに、私たちのドキュメントでトップに<div>This is my chart</div>のようなものをdiv要素を持っていると仮定の役割。その場合、次のように書く：

body.selectAll("div")

私たちはその存在するdivを選択しています。したがって、入力選択には、要素が一致していないデータが5つしかありません。例えば、HTML内のdivは（「これは私のチャートである」）は、すでに存在している、これは結果になりますin this jsfiddle、：

は、私たちはもう値「40」が表示されていません。私たちの最初の "バー"は消えてしまいました。その理由は、私たちの "入力"選択に今や5つの要素しかないということです。

ここで理解しなければならないのは、入力選択変数の最初の行にあるselectAll("div")のdivは、ちょうどプレースホルダです。 divsを追加する場合は、divsをすべて選択する必要はありません。circleを追加する場合は、すべてcircleを選択する必要はありません。私たちは別のものを選ぶことができます。そして、私たちは「更新」または「終了」を選択することを計画していない場合は、我々は何選択することができます。

var divs = body.selectAll(".foo")//this class doesn't exist, and never will! 
    .data(data) 
    .enter() 
    .append("div");

がこのようにやって、我々はすべて「.fooという」を選択しています。ここで、 "foo"は、存在しないだけでなく、コードのどこにも決して作られていないクラスです！しかし、これは重要ではありません。これはプレースホルダだけです。ロジックはこれである：あなたの「入力」を選択して、あなたが存在しないものを選択した場合

、あなたの「入力」選択が常には、すべてのデータが含まれています。今

、.fooを選択し、私たちの "入力" の選択は、我々はすでに文書でdiv要素を持っている場合でも、6つの要素を持っている：

そして、ここではcorresponding jsfiddleです。遠くではnull

を選択

、あなたは何を選択されていないことを保証するための最良の方法は、nullを選択しています。それだけでなく、この方法は他のどの方法よりも速いです。

このように、選択を入力するために、単に実行します。ここでは

selection.selectAll(null) .data(data) .enter() .append(element);

はデモフィドルです： "入力" の選択を扱う場合、余分な世話をhttps://jsfiddle.net/gerardofurtado/th6s160p/

結論

すでに存在するものを選択しないようにする。selectAllの中には、存在しないものや存在しないもの（「更新」や「終了」の選択をしない予定のあるもの）であっても、何でも使用できます。ちょっと偉大な説明のthats https://bl.ocks.org/mbostock/7322386

出典

2016-08-07 05:29:30

：例の

コードは、マイク・ボストックすることにより、このコードに基づいています。ありがとう。 – Ayan

答えて

関連する問題