Question

我是 D3js 的新手，我需要一些帮助... 我的任务是画一张汇率图

我在 .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: ["$", ""]
});

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

附言不用担心数据排序，它是在另一个 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
 })

要添加行函数，我们只需将其作为第三个参数传递给 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);
  });

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

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 解析分隔符分隔值的方式。

D3js 数据格式

1 个答案: