d3plus 不从 csv 加载数据答案

【问题标题】：d3plus not load data from csvd3plus 不从 csv 加载数据
【发布时间】：2019-09-04 12:50:36
【问题描述】：

我的代码：

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 中通过简单示例绘制图表？

【问题讨论】：

使用了哪个版本的 d3？
d3plus 有自己的 d3 版本：

标签： javascript d3.js d3plus

【解决方案1】：

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 v3 或 d3.js v5）阅读有关如何读取数据的精彩指南，了解更多相关信息

d3.js v3 有几个关于导入数据进行处理的示例，总体而言这可能是一个更好的选择。还要考虑 d3plus 在一年多的时间里没有得到 github 提交，因此该库可能没有得到很好的支持。

我希望这会有所帮助，至少可以让您开始。如果您需要更多帮助，请在下方留言。

【讨论】：