3

在上周测试了 D3js 之后，我是 nvd3 的新手。我想用 nvd3 从 .csv 文件加载数据，我在 D3 上做过，但我不能用 nvd3 来做......有人知道怎么做吗？使用 D3，我编写下一行，并从我的 wather.csv 中获取数据：

d3.csv("weather.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.Hour);
        d.T = +d.T;
    })
});

考虑到我的 weather.csv 文件，例如：

"Hour";"T";
"25.04.2013 12:00";"18.7";
"25.04.2013 11:00";"18.5";
"25.04.2013 10:00";"18.4";
"25.04.2013 09:00";"18.9";
...

在 Nvd3 示例中，我只在代码中找到了变量，没有加载任何 .csv 或 .json 文件。我想从文件中加载数据并显示一个简单的条形图。

更新

在这里，我有我实现的代码，但它不起作用。我使用 D3 中的 .csv 函数，但导航器说数据不存在，我不知道为什么。

var parseDate = d3.time.format("%d.%m.%Y %H:%M").parse;
d3.csv("weather.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.Hour);
        d.T = +d.T;
    })  

    nv.addGraph(function() {  
        //console.log(data);
        var chart = nv.models.discreteBarChart()
            .x(function(d) { return d.date })
            .y(function(d) { return d.T })
            .staggerLabels(true)
            //.staggerLabels(historicalBarChart[0].values.length > 8)
            .tooltips(false)
            .showValues(true);

        d3.select('#chart1 svg')
            //.datum(historicalBarChart)
            .datum(data)
            .transition().duration(500)
            .call(chart);

        nv.utils.windowResize(chart.update);
        return chart;
    });
});

谢谢。

4

3 回答 3

2

最后，我的代码出现了错误。NVD3.js 中的示例从 D3.js 加载 v2 文件。当我们使用 D3 的 2.x 版本时，我们必须使用以下代码加载外部数据：

d3.csv("weather.csv", function(data) {
    data.forEach(function(d) {
        d.date = parseDate(d.Hour);
        d.T = +d.T;
    })
});

在 v3 更新之后，这个东西发生了变化，出现了错误参数，并且在 .csv 函数中我们可以控制错误情况。

d3.csv("weather.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.Hour);
        d.T = +d.T;
    });
});

在这里，您可以看到D3.js 的创建者 Mike Bostock 解释的这种变化

于 2013-04-26T10:35:05.313 回答
0

您可以使用所有方法来加载 D3 中可用的数据，也可以使用 nvd3。此示例使用该d3.json函数加载数据。您可以简单地将其替换为d3.csv并添加您对数据的处理。

于 2013-04-26T09:21:11.740 回答
0

我在工作中查看了一些 nvd3 图表。

基本上，我将我的 CSV 转换为 JSON 结构，以便可以将其传递到 nvd3 库所需的结构中。

我可能是错的，但是您可以随时根据需要修改代码以适应您的目的。

于 2013-04-26T09:49:16.377 回答