Posted at

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);
});