ノードまたはエレメントとは、タグのペアで指定する要素 セレクションは、指定されたノードを操作するメソッドを持つ、配列のサブクラスである。selectAll()と、function()は対応し、ループ処理と同等の処理が可能になる 処理内でデータ要素を使いたい場合は…

セキュレイティの制約から、現在のブラウザはローカルファイルへのアクセスを原則禁止している。が、起動時の設定によってローカルアクセスを可能にすることができる。 Chromeの場合は次を参考に設定すればよい。 【小ネタ】Chromeのローカルセキュリティポ…

「設定」アイコン（右上の三本線のアイコン）→ツール→Javascriptコンソール Developer Toolウィンドウが開く。 下欄メニュー、左から２番めの"Show Console"アイコン（右向き不等号と三本線）をクリック

SVG要素にインタラクティブ機能を実装するには、.on() を使う。 svg.selectAll("rect") .data(dataset) .enter() .append("rect") ................. .on("mouseover", function() { d3.select(this) .attr("fill", "orange"); }) .on("mouseout", function(…

テキストクリックで処理を行うには、 d3.select("p") .on("click", function(){....のようになる。このケースでは、pタグをつけたテキストをクリックすると、function(){}で定義された処理が行われる。 では、複数のpタグテキストがある場合はどうするか。次…

通常、.data()の中身は単純な配列を入れる。１次元でも２次元でも、配列であることには変わらない。配列の要素はインデックスで指定するが、これは、0,1,2,....,nの数値である。 一方、任意の名前でデータの要素を指定したいことがある。これをd3.jsで実現す…

アニメーションを実現するのが、.transition()。 基本構文としては、 .transition() .duration(####) .ease($$$$) .attr(...) //変更したい属性 .......となる。ここで、 ####は、トランジションの時間(mSec) $$$$は、トランジションの種類で、次のように基…

d3.jsは、チェイン構文によってメソッドを次々とつないでいく。これは、上から下（あるいは左から右）へバトンを渡すようなイメージだ。 やりたい事を全て一連のチェインにすることも可能だが（その場合、受け渡される「バトン」は見えない）、データの変更…

データの追加・削除は、 dataset.push(newNumber); //データセットの最後にnewNumberを追加 dataset.pop(); //データセットの最後の要素を削除 dataset.shift(); //データセットの最初の要素を削除、全要素をひとつずつ前へを用いる。要素を追加・削除したデ…

いったん描画した図形の一部を更新したい場合は、描画したsvgセレクションの一部の属性を変更する。 例えば、下のように、SVGセレクションを定義し、そこにグラフを描いているとする。 //Create SVG element var svg = d3.select("body") .append("svg") .at…

あるデータのスケーリングは、.domain().range()の組み合わせで行う。範囲[a,b]の入力を、範囲[p,q]の出力に変換するスケーリング関数の基本形は次の通り。 var scale = d3.scale.種類 .domain([a,b]) .range([p, q]);.domain([a,b])は入力値の範囲、.range(…

d3.jsのサンプルコードを見ると、selectAll(), data(), enter(), append()というシーケンスが多用されている。これらの関係や挙動が、初心者にはわかりにくい。そこで、実際の挙動を見ながら、理解してみる。 参考:knowledge stockpile: Understanding selec…