Question

整个上午都被困住了。我一直在关注这个example

我一直在尝试让它在React中工作，但不幸的是没有运气。我以前能够读取csv并在控制台中记录数据，因此我知道它正在查找正确的文件。我在这里想念什么？

class Linegraph extends Component {
    componentDidMount() {
    var parseDate = d3.timeParse("%m/%d/%Y");

    var margin = { left: 50, right: 20, top: 20, bottom: 50 };

    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;

    var max = 0;

    var xNudge = 50;
    var yNudge = 20;

    var minDate = new Date();
    var maxDate = new Date();

    d3.csv("MOCK_DATA.csv")
      .row(function(d) {
        return {
          month: parseDate(d.month),
          price: Number(d.price.trim().slice(1))
        };
      })
      .get(function(error, rows) {
        max = d3.max(rows, function(d) {
          return d.price;
        });
        minDate = d3.min(rows, function(d) {
          return d.month;
        });
        maxDate = d3.max(rows, function(d) {
          return d.month;
        });
    .................

Answer 1

（注意：这个问题不是关于新d3.fetch模块的现有问题的重复，因为它使用的是行功能，而这些问题不在此问题中）

由于使用的是D3 v5，因此必须将v4的XmlHttpRequest模式更改为新的v5的Promises模式（请参见documentation here）。

因此，您的代码应为：

d3.csv("MOCK_DATA.csv", function(d) {
        return {
            month: parseDate(d.month),
            price: Number(d.price.trim().slice(1))
        };
    })
    .then(function(rows) {
    //etc...
    });

请注意以下事实：row函数位于d3.csv函数内部，作为第二个参数。

CSV不返回行

1 个答案: