在运行示例代码时，React + nvd3：'querySelector'未定义

Question

我试图将nvd3与react整合。当我刷新页面时node.js失败并出现以下错误：

/home/nikita/project/node_modules/d3/d3.js:562返回n.querySelector（s）; ^

TypeError：无法读取未定义的属性'querySelector'

我测试nvd3代码没有react，当它作为html文件呈现并且它工作正常，但现在我想将它与react集成并使用.jsx文件作为视图而不是普通的html。呈现的文件如下：

import React from 'react';
import DefaultLayout from './layouts/default';
import * as d3 from "d3";
import nvd3 from "nvd3";
require("./barChart.js");

class Index extends React.Component {
  render() {
    return (
      <DefaultLayout title={this.props.title}>
        <div>Hello {this.props.name}</div>
        <div id="barChart">
            <svg styles={{height:'600px'}}/>
        </div>
      </DefaultLayout>
    );
  }
}

module.exports = Index;

barChart.js看起来像这样：

import * as d3 from "d3";
import nvd3 from "nvd3";
var nv = nvd3;

 var barChart = nv.addGraph(function() {
        var chart = nv.models.discreteBarChart()
        .x(function(d) { return d.label })
        .y(function(d) { return d.value })
        .staggerLabels(true)
        //.staggerLabels(historicalBarChart[0].values.length > 8)
        .showValues(true)
        .duration(250)
        ;
    d3.select('#barChart svg')
        .datum(exampleData)
        .call(chart);
    nv.utils.windowResize(chart.update);
    return chart;
});

//Each bar represents a single discrete quantity.
function exampleData() {
 return  [
{
  key: "Cumulative Return",
  values: [
    {
      "label" : "A Label" ,
      "value" : -29.765957771107
    } ,
    {
      "label" : "B Label" ,
      "value" : 0
    } ,
    {
      "label" : "C Label" ,
      "value" : 32.807804682612
    } ,
    {
      "label" : "D Label" ,
      "value" : 196.45946739256
    } ,
    {
      "label" : "E Label" ,
      "value" : 0.19434030906893
    } ,
    {
      "label" : "F Label" ,
      "value" : -98.079782601442
    } ,
    {
      "label" : "G Label" ,
      "value" : -13.925743130903
    } ,
    {
      "label" : "H Label" ,
      "value" : -5.1387322875705
    }
  ]
}
  ]

}

module.exports = barChart

另外，package.json：

"dependencies": {
"babel-preset-env": "^1.6.1",
"body-parser": "~1.18.2",
"cookie-parser": "~1.4.3",
"d3": "^3.5.17",
"debug": "~2.6.9",
"express": "~4.15.5",
"express-react-views": "^0.10.4",
"mongodb": "^2.2.25",
"monk": "^4.0.0",
"morgan": "~1.9.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-nvd3": "^0.5.7",
"serve-favicon": "~2.4.5"
},

我尝试重写barChart.js，如教程：https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71但没有成功。有可能消除错误，但问题的根本原因 - 由DOM错误地选择nvd3元素 - 没有得到解决。

Answer 1

根据icepickle的建议，在refs中使用id而不是React，并使用教程：

https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71

我用以下方式改变了barChart.js：

import React, { Component } from 'react'
import * as d3 from "d3";
import nvd3 from "nvd3";
var nv = nvd3;

class barChart extends Component {
  constructor(props){
      super(props)
      this.createBarChart = this.createBarChart.bind(this)
  }

  componentDidMount() {
     this.createBarChart()
  }

  componentDidUpdate() {
    this.createBarChart()
  }

  createBarChart() {
    const node = this.node
    nv.addGraph(function() {
     var chart = nv.models.discreteBarChart()
        .x(function(d) { return d.label })
        .y(function(d) { return d.value })
        .staggerLabels(true)
        //.staggerLabels(historicalBarChart[0].values.length > 8)
        .showValues(true)
        .duration(250)
        ;
    d3.select(node)
        .datum(exampleData)
        .call(chart);
    nv.utils.windowResize(chart.update);
    return chart;
});
//Each bar represents a single discrete quantity.
function exampleData() {
 return  [
    {
      key: "Cumulative Return",
      values: [
        {
          "label" : "A Label" ,
          "value" : -29.765957771107
        } ,
        {
          "label" : "B Label" ,
          "value" : 0
        } ,
        {
          "label" : "C Label" ,
          "value" : 32.807804682612
        } ,
        {
          "label" : "D Label" ,
          "value" : 196.45946739256
        } ,
        {
          "label" : "E Label" ,
          "value" : 0.19434030906893
        } ,
        {
          "label" : "F Label" ,
          "value" : -98.079782601442
        } ,
        {
          "label" : "G Label" ,
          "value" : -13.925743130903
        } ,
        {
          "label" : "H Label" ,
          "value" : -5.1387322875705
        }
      ]
    }
  ]

}
  }

  render() {
  return <svg ref={node => this.node = node}
  width={500} height={500}>
  </svg>
 }

}

export default barChart

并使用主要Index.jsx视图中的元素：

import React from 'react';
import DefaultLayout from './layouts/default';
import * as d3 from "d3";
import nvd3 from "nvd3";
import barChart from './barChart';

class Index extends React.Component {
  render() {
    return (
      <DefaultLayout title={this.props.title}>
          <div>Hello {this.props.name}</div>
        <div>
          <barChart/>
        </div>
      </DefaultLayout>
   );
 }
}

module.exports = Index;

错误消失了，节点没有失败，但是，由于某些其他原因，图形仍未呈现。在做了一些搜索之后，我意识到我对React的入口点搞砸了：我认为该节点应该呈现jsx视图index.jsx，这应该做，但结果证明是非常错误的。

我需要将index.html文件添加到我的public节点静态资源文件夹中，然后创建一个新的条目index.js文件（我将index.jsx重命名为App.jsx）：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App/>, document.getElementById('root'));

然后，我需要更正从小写（app -> App; barChart -> BarChart）到大写的反应模块的所有名称：显然React强制用户使用某些命名约定。

然后我安装了webpack，将所有.jsx文件捆绑到bundle.js，将其作为index.html标签导入<script>。

只有在完成所有这些之后，项目才开始正常工作。