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

Question

[Ninja Mate]

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

Answer 1

[Markus Kelvin]

Необходимо заранее назначать переменную где будет список с данными...
включая ключи "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;

Comments

[Ninja Mate]

на npm install куча ошибот, рука не поднимается с этим разбираться. Пример должен же запускаться какой нибудь простой? Вы работали с этой библиотекой?

[Markus Kelvin]

Ninja Mate: пример должен запускаться при условии что у вас предустановлены все библиотеки (зависимости).
Если вы на Маке, попробуйте также "sudo npm install"
пока вы не установите все модули который запрашивает React D3, дальше разбираться смысла нет...

[Ninja Mate]

Markus Kelvin: тут не в установке проекта дело, а в использовании... если со старта такие глюки стоит ли вообще использовать. У вас есть опыт работы с этой библиотекой?

[Markus Kelvin]

Ninja Mate: Да использовал и вполне удачно на нескольких проектах.
Это не глюки, а просто в bundle.js нет всех необходимых библиотек и модулей чтобы правильно парсить ваши запросы.
Поэтому дело в том что перед тем как использовать, любую библиотеку нужно корректно устанавливать.
Это было бы также глючно если вы бы установили D3JS библиотеку.

[Markus Kelvin]

можете скинуть скрин на ваши ошибки при использование npm install?

[Ninja Mate]

Markus Kelvin: Я установил все сразу) ошибка где то в синтаксисе примера. Вот этот сработал сразу

import React, { Component } from 'react';

import { BarChart } from 'react-d3';

export class first extends Component {

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

    render() {
        var data =
        [
            {
                "name": "Series A",
                "values": [
                    { "x": 1, "y":  91},
                    { "x": 2, "y":  44}
                ]
            },
            {
                "name": "Series B",
                "values": [
                    { "x": 1, "y":  191},
                    { "x": 2, "y":  344}
                ]
            }

        ];

        return (
                <div>
                    <h1>First Chart</h1>

                    <BarChart
                        data={data}
                        width={500}
                        height={200}
                        fill={'#3182bd'}
                        title='Bar Chart'
                        yAxisLabel='Label'
                        xAxisLabel='Value'
                    />
                </div>
        );
    }
}
export default first;

[Ninja Mate]

Markus Kelvin: скорее всего data={} не принимает простой аррей и нуждается в key

[Markus Kelvin]

Ninja Mate: Ах да необратил внимание... конечно когда вы передаете в data какой либо список...

типа этого

var data =
[
{
"name": "Series A",
"values": [
{ "x": 1, "y": 91},
{ "x": 2, "y": 44}
]
},
{
"name": "Series B",
"values": [
{ "x": 1, "y": 191},
{ "x": 2, "y": 344}
]
}

];

В нем должны быть значения name и value на основание которых он будет строить график...
в вашем случаи это 1,2,3 что для D3 ничего не означают....

[Ninja Mate]

Markus Kelvin: Спасибо за помощь. Отредактируйте ответ как последний коммент, отмечу. Вдруг поможет другим.

[Markus Kelvin]

Ninja Mate: обновил ответ. Спасибо!