d3plus无法从csv加载数据

时间:2019-04-14 09:48:28

标签: javascript d3.js d3plus

我的代码:

function d3_chart() {
      // sample data array
      // instantiate d3plus
      var visualization = d3plus.viz()
        .container("#viz")  // container DIV to hold the visualization
        .data("./extra/acc.csv", {"filetype": "csv"})  // data to use with the visualization
        .type("line")       // visualization type
        .y("x")         // key to use for y-axis
        .x("timestamp")          // key to use for x-axis
        .draw()             // finally, draw the visualization!
    }

我的csv:

timestamp,x,y,z
0,2019-02-28 12:20:19.631,1.072,-0.153,10.113
1,2019-02-28 12:20:19.731,1.072,-0.153,10.419
2,2019-02-28 12:20:19.831,1.072,-0.153,9.96
3,2019-02-28 12:20:19.931,1.072,-0.153,10.113
4,2019-02-28 12:20:20.031,1.072,-0.153,10.113
5,2019-02-28 12:20:20.132,1.225,-0.153,9.96
6,2019-02-28 12:20:20.231,1.225,-0.153,9.96
7,2019-02-28 12:20:20.331,1.225,-0.153,9.96
8,2019-02-28 12:20:20.431,0.919,-0.306,9.5
9,2019-02-28 12:20:20.531,0.919,0.459,9.807
10,2019-02-28 12:20:20.631,1.225,0.153,10.113
11,2019-02-28 12:20:20.731,1.379,-1.992,10.113
12,2019-02-28 12:20:20.831,1.838,-0.306,9.653
13,2019-02-28 12:20:20.931,0.153,0.766,10.113
14,2019-02-28 12:20:21.032,0.459,1.532,10.266
15,2019-02-28 12:20:21.133,1.072,0.0,9.96

我刚收到消息: 没有可用数据

怎么了?我在互联网上找不到通过此库加载csv的任何示例

还是有些东西知道如何通过普通D3从csv的图形图表得到简单的示例?

1 个答案:

答案 0 :(得分:0)

d3plus似乎正在使用d3.js v3.5.15。无论如何,您将需要告诉d3plus如何加载数据。阅读API文档,看来您将不得不使用

加载数据

d3plus.dataLoad(path, [formatter], [key], [callback]),如here所述。

或者,您可以使用d3.js解析csv文件并将其作为数据传递。为此,您可以使用

d3.csv.parse(string[, accessor]),如d3.js CSV API中提供。

请记住,在两种情况下,您都需要将时间戳记格式化为正确的时间格式(对于d3.js Time Format API doc),以便能够使用时标。同样至少对于d3.js,当从CSV解析数据时,所有值都是字符串值,因此您将需要使用类型转换函数来更改值的类型。您可以在有关如何通过Learnjsdata(d3.js v3d3.js v5)读取数据的出色指南中阅读有关此内容的更多信息。

对于d3.js v3,有几个有关导入数据进行处理的示例,这可能是一个更好的选择。还请考虑d3plus一年多来没有github提交,因此该库可能未得到很好的支持。

我希望这会有所帮助,至少可以帮助您开始。如果您需要更多帮助,请在下面发表评论。