3

nvd3 を使用して複数折れ線グラフを作成しましたが、いくつかの重要な方法で変更できませんでした。ストレートなd3jsを使って自作したいのですが、 joins で考えるのに苦労しています。

d.keyそれぞれに対応するパスを作成する必要がありますd.values。

私のデータは次のようにnvd3用にフォーマットされています（要約）。

[
    {
        "key":"brw-a",
        "values":[
            ["2012-07-11T00:00:00", 0.0 ],
            ["2012-07-11T23:59:59", 0.0 ],
            ["2012-07-05T06:31:47", 0.0 ],
            ["2012-07-05T23:59:59", 0.0 ]
        ]
    },
    {
        "key":"brw-c",
        "values":[
            ["2012-07-11T00:00:00", 0.0 ],
            ["2012-07-07T00:00:00", 2.0 ],
            ["2012-07-05T23:59:59", 4.0 ]
        ]
    }
]

each に格納されている配列にアクセスするには、内部ループが必要なようですd.values。役に立たない大きな塊がどのように現れるかを示す実用的な例があります。d.values

var p = d3.select("body").selectAll("p")
        .data(data)
      .enter().append("p")
        .text(function(d) {return d.key +":  " + '[' + d.values + ']'})

私は近くにいるように感じます。それは次のことと関係があります。

.data(data, function(d) { return d.key; })

更新:データを手動でループして、目的の効果を作成することができました。おそらく、結合でこれを行う方法はありませんか? もちろん、素晴らしい nvd3 lib を使用するために保存してください。リンクについては、以下のコメントを参照してください。

var body = d3.select("body")

for (i=0; i < data.length; i++) {
    var key = data[i].key
    var values = data[i].values

    body.append("h3")
        .text(key)

    for (j=0; j < values.length; j++) {
        body.append("p")
            .text(values[j][0] + " -- " + values[j][1])
    }

}
4

1 に答える 1

1

あなたは機能について正しかった.data()。しかし、valuesの要素をループする必要があるため、ネストされた選択のデータとして渡す必要があるのは次のとおりです。

.data(function(d) { return d.values})

これを試すことができます：

var p = d3.select("body").selectAll("p")
        .data(data)
      .enter().append("p")
        .attr("id", function(d) { return d.key})
        .text(function(d) {return d.key})
            .selectAll("span")
                .data(function(d) { return d.values})
                .enter().append("span")
                    .text(function(d) {return d})

プロデュース:

<p id="brw-a">brw-a
    <span>2012-07-05T00:00:00,0</span>
    <span>2012-07-06T23:59:59,1</span>
    <span>2012-07-07T06:31:47,0</span>
    <span>2012-07-08T23:59:59,3</span>
</p>

<p id="brw-c">brw-c
    <span>2012-07-11T00:00:00,0</span>
    <span>2012-07-07T00:00:00,2</span>
    <span>2012-07-05T23:59:59,4</span>
</p>
于 2012-08-03T09:15:45.470 に答える