我尝试使用与react-d3的反应,但我一直都在收到错误,第一次,我使用了反应v16,但它请求React v0.14.9.
所以现在我可以在出现错误之前看到图表.
我用过 this tuto from react d3.
所以现在我可以在出现错误之前看到图表.
我用过 this tuto from react d3.
设置后出现错误:
- findComponentRoot(...,.0.0.1.0.0.1.0.$/=13.0.$faux-dom-0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g.,by the browser),usually due to forgetting a <tbody> when using tables,nesting tags like <form>,<p>,or <a>,or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ''.
这听起来像我有一张桌子,但不是,App.js看起来像:
- import React,{ Component } from 'react';
- import './App.css';
- import {Chart} from 'react-d3-core';
- import {LineChart} from 'react-d3-basic';
- class App extends Component {
- render() {
- var chartData = [
- {data: 2000}
- ]
- var width = 700,height = 300,margins = {left: 100,right: 100,top: 50,bottom: 50},title = "User sample",// chart series,// field: is what field your data want to be selected
- // name: the name of the field that display in legend
- // color: what color is the line
- chartSeries = [
- {
- field: 'BMI',name: 'BMI',color: '#ff7f0e'
- }
- ],// your x accessor
- x = function(d) {
- return d.index;
- }
- return (
- <div className="App">
- <Chart
- title={title}
- width={width}
- height={height}
- margins= {margins}
- >
- <LineChart
- showXGrid= {false}
- showYGrid= {false}
- margins= {margins}
- title={title}
- data={chartData}
- width={width}
- height={height}
- chartSeries={chartSeries}
- x={x}
- />
- </Chart>
- </div>
- );
- }
- }
- export default App;
的package.json
- {
- "name": "reactd3","version": "0.1.0","private": true,"dependencies": {
- "ajv": "^6.5.2","babel-loader": "^7.1.5","html-webpack-plugin": "^3.2.0","react": "^0.14.9","react-d3": "^0.4.0","react-d3-basic": "^1.6.11","react-dom": "^0.14.9","react-scripts": "1.1.4","style-loader": "^0.21.0","webpack": "^4.16.2"
- },"scripts": {
- "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject"
- },"devDependencies": {
- "webpack-cli": "^3.1.0"
- }
- }
没有理由出现该错误,因为Chart没有表格形式.
我尝试在使用react16之前使用但没有成功,很多错误……
编辑:现在我们使用d3.js而不是react-d3它可以工作,但如果有人有问题要解决它会更好.