jQuery
d3.js

jQueryのあれ、D3.jsでどうやるの?(または、その逆)

More than 3 years have passed since last update.

最近、D3.jsを使ってみたら、jQueryでできることがD3.jsでもできる。
混ざってると変なので、D3.jsを使うときは基本D3.jsで書きたいなぁということでメモ。

総合すると、D3.jsでビジュアライズするための操作はD3.jsがよくって、そうじゃない普通のDOM操作はjQueryがよいという当たり前の感じですね。

APIドキュメント

当然、全部はメモしないので、困ったときはちゃんとAPIドキュメントをみる。

jQuery

http://semooh.jp/jquery/

D3.js

https://github.com/mbostock/d3/wiki/API-Reference

DOMの要素選択

基本同じなんだけど、D3.jsは次のような書き方ができる。
これは、要素の追加・削除をたくさんするD3.jsでは重宝する。

d3.select("tbody").selectAll("tr").attr("foo", "bar").selectAll("td")
やりたいこと jQuery D3.js
単一要素選択 $("#id01") d3.selectAll("#id01")
複数要素のはじめだけ選択 $("div")[0] d3.select("div")
DOM階層で指定 $("tbody tr td") d3.selectAll("tbody tr td")

DOMの属性制御

class属性の追加・削除はD3.jsの方がハンドルしやすそう。
D3.jsのSELECTION.property('value', 'val')はvalueだけじゃなく、チェックボックスのcheckedなんかも使える。

やりたいこと jQuery D3.js
属性追加 SELECTION.attr("key", "val") SELECTION.attr("key", "val")
まとめて属性追加 SELECTION.attr({"key1":"val1", "key2":"val2"}) SELECTION.attr({"key1":"val1", "key2":"val2"})
属性削除 SELECTION.removeAttr("key") ないっぽい
class属性追加 SELECTION.addClass('foo bar hoge') SELECTION.classed({'foo': true, 'bar': true, 'hoge':true})
class属性削除 SELECTION.removeClass('foo bar') SELECTION.classed('foo bar' ,false)
テキスト追加 SELECTION.text('text') SELECTION.text('text')
テキスト取得 SELECTION.text() SELECTION.text()
value追加 SELECTION.val('val') SELECTION.property('value', 'val')

DOMの選択系操作

jQueryのnextとかparentとかDOMの選択系操作は、D3.jsにはほとんどないっぽい。

DOMの制御・更新系操作

やりたいこと jQuery D3.js
タグの追加(後) SELECTION.append("<div1></div1>") SELECTION.append("div1")
タグの追加(前) SELECTION.prepend("<div2></div2>") SELECTION.insert("div2", "div1")

CSS操作

やりたいこと jQuery D3.js
style追加 SELECTION.css({'color': 'red', 'font-size': 'large'}) SELECTION.style({'color': 'red', 'font-size': 'large'})

Web API(JSON形式)

jQuery

$.ajax({
    url: "ajax.html",
}).done(function(data){
    console.log(data);
}).fail(function(error){
    console.log(error);
});

D3.js

d3.json("ajax.html", function(error, data){ 
    if (error != null) {
      console.log(err);
      return;
    }
    console.log(data);
});

CSV

jQuery

$.get("data.csv", function(data){
    var csv = $.csv()(data);
    console.log(csv);
})

D3.js

d3.csv("data.csv", function(error, data){ 
    if (error != null) {
      console.log(err);
      return;
    }
    console.log(data);
});