くりーむわーかー

プログラムとか。作ってて ・試しててハマった事など。誰かのお役に立てば幸いかと。 その他、いろいろエトセトラ。。。

D3

D3のline()

D3を久しぶりに触ったらしょーもない事でちょっとはまった。

D3はv4から「d3.svg.line()」がなくなったのね。。。

v4からは「d3.line()」を使えとゆーことらしい。

「d3.svg.line()」を書くと、chromeだと↓のエラーが出る。

The error is: Uncaught TypeError: Cannot read property 'line' of undefined

なわけねーと思って調べてみたらv4からは「d3.line()」って書いてあった。ぐぐって出てくる日本語のサンプルソースが軒並み古い。

参考にしたのはココ

D3.js text追加したら最初の数件が無視される

久しぶりにD3イジイジしてたら、しょーもないところではまった。

svg.selectAll("text")
                .data(dataset)
                .enter()
                .append("text")
                .attr("text-anchor", "left")

上の感じで、text要素を追加するんだけども、datasetの最初の数件が無視される。なんでじゃーって色々見てみたら、x軸追加してるんだけど、X軸のラベルのところがtext要素になっててselectAll("text")やるとそっちも拾ってしまい、X軸に出てるラベルの個数分、datasetの先頭から無視されてた。

お恥ずかしい感じ。そりゃそーだ。つか、要素名を直でselectAllはするもんじゃないですね。アホだ。

javascript D3使って集計とか

D3使ってオブジェクト内の集計をやりたくなった。ちょっとだけ複雑なオブジェクトでやりたい。 例えば下くらいのオブジェクトの配列で。

var hogeobj= {
    date: "2016-04-01",
    group: {
        classname: "都道府県",
        values: [
            { name1: "青森", name2: "りんご", value: 6 },
            { name1: "秋田", name2: "美人", value: 10 },
            { name1: "秋田", name2: "きりたんぽ", value: 2 },
            { name1: "宮城", name2: "笹かま", value: 3 },
            { name1: "青森", name2: "りんご", value: 8 },
            { name1: "青森", name2: "美人", value: 4 },
            { name1: "秋田", name2: "笹かま", value: 15 },
            { name1: "宮城", name2: "桜", value: 1 },
        ]
    }
}

上の感じのデータセットで、例えば、各オブジェクト内のname1のグループ毎にvalueを合計したいとか。下の感じ。

var groupCountObj = d3.nest()
                            .key(function (d) { return d.name1; })
                            .rollup(function (v) { return d3.sum(v, function (d) { return +d.value; }); })
                            .map(hogeobj.group.values);
console.log(groupCountObj);
->Object {青森: 18, 秋田: 27, 宮城: 4}

集計はされるんだけど、Objectで結果が戻ってくるので割と扱いにくい。なので、配列にkey-value的な感じでmapする。

var tmpob = $.map(groupCountObj, function (value, index) {
    return { label: index, value: value }
});
console.log(tmpob);
->[Object, Object, Object]
0:Object
label:"青森"
value:18
__proto__:Object

1:Object
label:"秋田"
value:27
__proto__:Object

2:Object
label:"宮城"
value:4
__proto__:Object

length:3
__proto__:Array[0]

これでD3使っての円グラフとかに使いやすくなる。

久しぶりにD3使ったけど、すごい忘れてる。。。えらいこっちゃ。

問合せ