victorzadorozhnyy
@victorzadorozhnyy

Как пользоваться библиотекой D3 React?

react-d3
пример
Не получается вставить чарт в проект, даже из примера. Что делаю не так? (сборка их родная с гит собирается с миллионом ошибок...)
import React, { Component } from 'react';

import { BarChart } from 'react-d3';

export class first extends Component {

    constructor(...args) {
        super(...args);
        this.state = {};
    }

    render() {
        return (
                <div>
                    <h1>First Chart</h1>

                    <BarChart
                                data={[2,3,4]}
                                width={500}
                                height={200}
                                fill={'#3182bd'}
                    />
                </div>
        );
    }
}
export default first;

ошибка Uncaught TypeError: Cannot read property 'map' of undefined
(anonymous function) @ d3.js?94ba:6688
stack @ d3.js?94ba:6687
module.exports.React.createClass.render @ BarChart.js?2b66:79
ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js?cd59:587
ReactCompositeComponentMixin._renderValidatedComponent @ ReactCompositeComponent.js?cd59:607
wrapper @ ReactPerf.js?ef93:66
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:220
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241
ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591
ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241
ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591
ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241
ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591
ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241
ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591
ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241
ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591
ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241
ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591
ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225
wrapper @ ReactPerf.js?ef93:66
ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37
mountComponentIntoNode @ ReactMount.js?2f23:266
Mixin.perform @ Transaction.js?6dff:136
batchedMountComponentIntoNode @ ReactMount.js?2f23:282
Mixin.perform @ Transaction.js?6dff:136
ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js?ef70:62
batchedUpdates @ ReactUpdates.js?ce09:94
ReactMount._renderNewRootComponent @ ReactMount.js?2f23:476
wrapper @ ReactPerf.js?ef93:66
ReactMount._renderSubtreeIntoContainer @ ReactMount.js?2f23:550
ReactMount.render @ ReactMount.js?2f23:570
wrapper @ ReactPerf.js?ef93:66
(anonymous function) @ index.js?1fdf:6
(anonymous function) @ bundle.js:622
__webpack_require__ @ bundle.js:535
fn @ bundle.js:76
(anonymous function) @ bundle.js:567
__webpack_require__ @ bundle.js:535
(anonymous function) @ bundle.js:558
(anonymous function) @ bundle.js:561
  • Вопрос задан
  • 674 просмотра
Решения вопроса 1
@mmxdesign
Software Engineer
Необходимо заранее назначать переменную где будет список с данными...
включая ключи "name"и "values" на основе которого будет построен график.

Update:
import React, { Component } from 'react';

import { BarChart } from 'react-d3';

export class first extends Component {

    constructor(...args) {
        super(...args);
        this.state = {};
    }

    render() {
  // необходимо заранее назначить на переменую список с минимальными данными включая  ключи "name"и "values"
    var data = [
    {
    	name: "series1",
    	values: [ { x: 0, y: 20 }, { x: 24, y: 10 } ]
  	},
  	{
    	name: "series2",
    	values: [ { x: 70, y: 82 }, { x: 76, y: 82 } ]
  	}
	];
        return (
                <div>
                    <h1>First Chart</h1>

                    <BarChart
                                data={data}
                                width={500}
                                height={200}
                                fill={'#3182bd'}
                    />
                </div>
        );
    }
}
export default first;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы