D3js 数据格式

Question

我是 D3js 的新手，我需要一些帮助...我的任务是绘制汇率图表

我有这样的数据 in.txt 文件：

date,value
2020-12-31,38.43
2020-12-08,35.43
2020-12-04,35.839
2020-10-21,36.222
2020-08-04,38.834
2020-06-04,39.562
2020-04-04,37.832
2020-03-12,38.834
2020-02-08,36.723
2020-01-04,37.834

我的 JS 代码是：（euroFileName = "euro.txt" - 数据文件的路径）

 let eMargin = {top: 10, right: 30, bottom: 30, left: 30}, eWidth = 800 - eMargin.left - eMargin.right, eHeight = 400 - eMargin.top - eMargin.bottom; let svg2 = d3.select("#euroChart").append("svg").attr("width", eWidth + eMargin.left + eMargin.right).attr("height", eHeight + eMargin.top + eMargin.bottom).append("g").attr("transform", "translate(" + eMargin.left + "," + eMargin.top + ")"); d3.csv(euroFileName, function(d){ return { date: d3.timeParse("%Y-%m-%d")(d.date), value: d.value } }, function(data) { //Only last year data let dateCurrent = Date.now() data = data.filter(function(d){return d.date >= dateCurrent - (365 * 24 * 3600 * 1000)}) // X Axis let now = new Date(); let x = d3.scaleTime().domain([now - (365 * 24 * 3600 * 1000), d3.max(data, function(d) { return d.date; })]).range([ 0, eWidth ]); svg2.append("g").attr("transform", "translate(0," + eHeight + ")").call(d3.axisBottom(x)); // Y Axis let y = d3.scaleLinear().domain([d3.min(data, function(d) { return +d.value; })-2, d3.max(data, function(d) { return +d.value; })]).range([ eHeight, 0 ]); svg2.append("g").call(d3.axisLeft(y)); svg2.append("path").datum(data).attr("fill", "none").attr("stroke", "steelblue").attr("stroke-width", 1.5).attr("d", d3.line().x(function(d) { return x(d.date) }).y(function(d) { return y(d.value) }) ) } )

它工作得很好......但是！ 现在我需要将我的数据更改为另一种语言环境数据格式。 现在我得到了这样的：

date;value
31.12.2020;31,13
21.05.2020;31,13
03.04.2020;31,13
05.11.2020;31,13
16.10.2020;31,13
29.05.2020;31,13
30.12.2020;31,13

我想你已经明白了，但我会宣布：如何让 D3js 识别新格式的数据？ 我正在使用https://d3js.org/d3.v4.js在我看来，重点在于：

 defaultLocale({ decimal: ".", thousands: ",", grouping: [3], currency: ["$", ""] });

但我不确定我能用它做什么......

PS不用担心数据排序，它是在另一个PHP脚本中完成的。 我可以完全访问所有数据\代码（本地主机）

如果您能帮助我，我将不胜感激！

Answer 1

D3.csv 不适用于以分号 ( ; ) 分隔的数据，您需要使用不同的方法来获取数据。 幸运的是，在使用 d3.dsv 解析分隔符分隔的值时，您可以使用任何分隔符。 如果您有 d3v5 或 v6，它会更简单一些。

如果您已将逗号替换为分号作为分隔符，则可以使用以下命令代替 d3.csv：

D3 v5 和 v6：

 d3.dsv(";", "file.dsv").then(function(data) {
     // ... do something with data
 })

要添加一行 function，我们只需将其作为第三个参数传递给 d3.dsv：

function row(d){
     return { date : d3.timeParse("%d.%m.%Y")(d.date), value : d.value }
}

d3.dsv(";", "file.dsv",row).then(function(data) {
     // ... do something with data
 })

在 d3v3 和 v4 及更早版本中，您可以使用：

var dsv = d3.dsvFormat(";");

d3.request("test.dsv")
  .mimeType("text/plain")
  .response(function(data) { return dsv.parse(data.response) })
  .get(function(data) {
     // ... do something with data here
     console.log(data);
  });

根据您建议的编辑和问题中的代码，您似乎有一行 function。 要将一行 function 与上述 v3/4 function 一起使用，我们将使用：

function row(d){
     return { date : d3.timeParse("%d.%m.%Y")(d.date), value : d.value }
}

let dsv = d3.dsvFormat(";");
d3.request(dollarFileName)
  .mimeType("text/plain")
  .response(function(data) { return dsv.parse(data.response, row) })
  .get(function(data) { .... 
      // use data.
  })
   

这些将让您解析您的数据，这与它的表示无关，这是您所看到的语言环境信息。 语言环境信息不会影响或改变 d3 解析分隔符分隔值的方式。