d3.js学習ノート(未完待機)
1496 ワード
d3.jsはjQueryと同じチェーン文法です.
d3.jsの一般的な方法:
1. d3.select():CSSセレクタ構文を使用してDOMから単一要素を選択します.
2. d3.selectAll():要件を満たすすべての要素を選択します.
3. selection.append():要素を作成し、選択セットの末尾に追加します.
4. selection.text():テキストの内容を設定します.
5. selection.data():DOM要素にデータをバインドし、数値はDOM要素の__に格納します.data__属性
6. selection.Enter():新しいバインドデータの要素を作成する場合に使用する必要があります.まずDOMをチェックし、次にDOMにデータを渡します.数値が対応するDOM要素より多い場合、新しい占有要素を作成し、リンクを下に渡します.
7. selection.スタイル():CSSスタイルを変更する
8.attr():HTML属性値を変更する方法
9. selection.classed():要素からクラスをすばやく適用または削除する方法
上の関数は私が例を勉強するときによく使う関数です.より多くの関数は、d 3の公式API検索を参照することができる.
d3.jsの一般的な方法:
1. d3.select():CSSセレクタ構文を使用してDOMから単一要素を選択します.
:d3.select("body");
2. d3.selectAll():要件を満たすすべての要素を選択します.
:d3.select("body").selectAll("p");// body p
3. selection.append():要素を作成し、選択セットの末尾に追加します.
:d3.select("body").append("p");// p , body
4. selection.text():テキストの内容を設定します.
:d3.select("body").append("p").text("New");// p
5. selection.data():DOM要素にデータをバインドし、数値はDOM要素の__に格納します.data__属性
:d3.select("body").selectAll("p").data(dataset);
6. selection.Enter():新しいバインドデータの要素を作成する場合に使用する必要があります.まずDOMをチェックし、次にDOMにデータを渡します.数値が対応するDOM要素より多い場合、新しい占有要素を作成し、リンクを下に渡します.
:d3.select("body").selectAll("p").data(dataset).enter().append("p").text("New paragraph!");
7. selection.スタイル():CSSスタイルを変更する
:d3.select("div").style("height", “10px”);
8.attr():HTML属性値を変更する方法
:d3.select("div").attr("class", "bar");
9. selection.classed():要素からクラスをすばやく適用または削除する方法
:d3.select("div").classed("bar", true);
上の関数は私が例を勉強するときによく使う関数です.より多くの関数は、d 3の公式API検索を参照することができる.