Question

我是D3的新手，并且正在使用它来构建简单的折线图。但是，我在网上找到的许多示例都是针对版本3的，不再起作用。

我有一些代码：

// Get the data
d3.csv("data.csv", function(error, data) {
  if (error) throw error;

  // format the data
  data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.close = +d.close;
  });

  // Scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.close; })]);

  // Add the valueline path.
  svg.append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", valueline);

  // Add the X Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // Add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y));

});

data.csv：

date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00

但是我似乎无法将其重构为仅与普通的Javascript数组一起使用：

let data = [
      {date: 'Tue May 01 2012 00:00:00 GMT-0700 (Pacific Daylight Time)', close: 58.13},
     {date: 'Mon Apr 30 2012 00:00:00 GMT-0700 (Pacific Daylight Time)', close: 53.98},
    {date: 'Fri Apr 27 2012 00:00:00 GMT-0700 (Pacific Daylight Time)', close: 67}
    ];

此外，文档不是非常清晰。我应该看哪个API？谢谢

Answer 1

这里是@saj's example到d3v5.x的转换：https://jsfiddle.net/sunny001/nrhLep72/33/

我不是d3的英雄，我也很沮丧地看到基于d3早期版本的各种示例，这些示例无法在当前版本中运行，但是我想与{{ 1}}，因此，我认为值得花时间了解随着d3的发展而发生的变化。

因此，将@saj的d3示例转换为d3v3.x –大多数更改涉及使语法更加简洁和具体。下面是几个例子。还有其他变化–比较这两个小提琴。希望这会有所帮助。

d3.v3.x

d3v5.x

d3.v5.x（请注意使用不同的var parseDate = d3.time.format("%d-%b-%y").parse;说明符来处理您的特定日期格式）

format

d3.v3.x

var parseDate = d3.timeParse("%a %b %d %Y");

d3.v5.x

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

d3.v3.x

var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

d3.v5.x

var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

如何使用JSON在D3版本4中加载数据？

1 个答案: