如何使用d3js创建多行图表，json格式为nvd3

How do I create a multiline chart using d3js with json formatted for nvd3?

本文关键字：json 格式 nvd3 d3js 何使用 创建      更新时间：2023-09-26

我使用nvd3创建了一个多折线图，但无法在某些重要方面对其进行修改。我想使用直接的d3js进行自己的滚动，但我很难在联接中思考。

我需要为每个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 ]
        ]
    }
]

我似乎需要一个内部循环来访问存储在每个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; })

更新：我能够手动循环数据以创建所需的效果。也许没有一种方法可以通过联接来实现这一点？当然，除了使用出色的nvd3lib。请参阅下面的评论以获取链接。

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

您对.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>
相关文章：