Question

因此，我正在尝试导入数据以绘制折线图。以下：

import input from './data.json';

d3.json(input, function(err, d){
  console.log(d)
});

不起作用，然后返回：

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

TH的data.json：

[
    {"date" : "12/09/17", "value": 83, "module": 0},
    {"date" : "19/09/17", "value": 79, "module": 1},
    {"date" : "26/09/17", "value": 78, "module": 2},
    {"date" : "30/09/17", "value": 73, "module": 3},
    {"date" : "08/10/17", "value": 71, "module": 4},
    {"date" : "15/10/17", "value": 67, "module": 5},
    {"date" : "22/10/17", "value": 65, "module":6}
]

如果我尝试以csv格式导入数据，那么它也不起作用。通过控制台登录d3.csv函数，它将记录0、1、2、3、4...。基本上是每个数据的索引。

我在这里想念什么？数据导入方式有问题吗？我正在努力找出问题所在。我浏览了关于blockbuilder的几个示例。导入数据的方式并不多。

编辑：我的反应组件：

`类Reactchart扩展了React.Component {

componentDidMount(){
  this.myfunc();
}

componentDidUpdate(){
  this.myfunc();
}

myfunc() { 
    d3.json(input, function(err, d){ 
        console.log(d) }); 
    } 
}

}`

Answer 1

您可以使用require代替导入。

let data = require("./data.json");

编辑：我正在阅读similar question的答案，看来您可以导入json文件，但是语法已关闭：

import * as input from "./data.json";

编辑：例如：

import * as input from "./data.json";

class Chart extends React.Component {
    constructor() {
        console.log(input);
    }

    render() {
        // just use 'input' as-is, it's a json object
        d3.select("svg")
          .append("svg")
          .selectAll("rect")
          .data(input)
          .enter()
          // ... all your d3 attr() etc
    }
}

在React组件中导入d3数据

1 个答案: