セレクションにクラスを設定する場合、 セレクション.attr("class", "クラス名")とする。ここでクラス名は"myclass"のように、先頭の"."は不要。 複数のクラスをつける場合は、"myclassA myclassB"とスペースで区切る。ただし、attr("class", "..")は、"clas…

可視化コンテンツではズームやパンが必要になることが多いが、実装はなかなか面倒なもの。しかし心配は不要。d3.jsには強力なズーム＆パン機能が備わっている。このAPIが、d3.behavior.zoom() だ。参考：Zoom Behavior · mbostock/d3 Wiki · GitHub 例： SVG…

d3.jsのAPIにcallというのがある。関数を呼び出すAPIであることはわかるのだが、具体的な使い方がいまひとつピントこなかったので、Referenceを読んでみた。Selections · mbostock/d3 Wiki · GitHubまず具体的な例から。 function foo(selection) { selectio…

Node.jsは高速でスケーラブルなネットワークアプリケーションを 簡単に構築するためにChrome の JavaScript 実行環境 上に構築されたプラットフォーム。 イベント駆動とノンブロッキング I/O モデルを使用することにより 軽量・効率的で、分散されたデバイス…

このあたりが詳しく書いてくれているがTopoJSONとは何か : circumstance evidence、簡単に言うと、地理データを効率的に格納できるGeoJSONの拡張形式。

ノードまたはエレメントとは、タグのペアで指定する要素 セレクションは、指定されたノードを操作するメソッドを持つ、配列のサブクラスである。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…