More than 5 years have passed since last update.

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

Posted at 2014-12-07

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

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

APIドキュメント

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

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

d3.select("tbody").selectAll("tr").attr("foo", "bar").selectAll("td")

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')`

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

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

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

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

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

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

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