Question

我是React和NVD3的新手。我正在尝试呈现一个包含React和NVD3的索引页，但不知道数据是否会传递给NVD3Chart。我用node渲染它。 index.jsx文件的方式如下：

import React from 'react';
import DefaultLayout from './layouts/default';
import NVD3Chart from 'react-nvd3';

// JSON data
import datum from './datum'

class App extends React.Component {
  render() {
    return (
      <DefaultLayout title={this.props.title}>
        <div>Hello {this.props.name}</div>
        <NVD3Chart id="barChart" type="discreteBarChart" datum={datum}   
x="label" y="value"/>
      </DefaultLayout>
    );
  }
}

module.exports = App;

页面渲染正常，没有打印出错误。 datum也很好：我在console.log(datum)中做了render()，并在网页上打印出来。

我尝试将内联数据提供给NVD3Chart标记，但结果相同，不会进行渲染：

<NVD3Chart id="barChart" type="discreteBarChart" datum='[{
      key: "Cumulative Return",
      values: [
        {
          "label" : "A" ,
          "value" : -29.765957771107
        } ,
        {
          "label" : "B" ,
          "value" : 0
        } ,
        {
          "label" : "C" ,
          "value" : 32.807804682612
        } ,
        {
          "label" : "D" ,
          "value" : 196.45946739256
        } ,
        {
          "label" : "E" ,
          "value" : 0.19434030906893
        } ,
        {
          "label" : "F" ,
          "value" : -98.079782601442
        } ,
        {
          "label" : "G" ,
          "value" : -13.925743130903
        } ,
        {
          "label" : "H" ,
          "value" : -5.1387322875705
        }
      ]
    }
  ]' x="label" y="value"/>

如果我转到开发人员控制台并查看html，它会看起来如下：

我尝试import * as d3 from "d3";时可能nvd3-react也需要d3导入，但没有成功。

为什么不起作用？我能尝试什么？

数据不会传递给NVD3Chart

0 个答案: