Настройка React в сочетании с NVD3

Question

Настройка React в сочетании с NVD3

0

Я новичок в React (и в основном работа на фронте). Как я могу настроить React для работы с NVD3?

В настоящее время я пытаюсь реализовать пример кода реакции-nvd3, но получить следующую ошибку, вызванную функцией d3 d3.transform():

Неожиданное значение переводит (145, NaN) атрибут преобразования синтаксиса.

g.setAttribute("transform", string);

Мой код выглядит следующим образом:

var TestData = [{
    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
        }
    ]
}];

var App = React.createClass({
    render: function() {
        return (
                <NVD3Chart id="chart" type="discreteBarChart" datum={TestData} x="test" y="test"/>
        );
    }
});

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

См. Https://jsfiddle.net/x2wuko8g/2/ Я предполагаю, что он должен что-то сделать с форматом TestData, но не может понять это.

Помощь очень ценится!

Roy van der Valk 27 янв. 2016, в 18:19

Источник

Теги:

reactjs

d3.js

nvd3.js

1 ответ

Ещё вопросы

Topicus · Accepted Answer · 2016-01-27T18-26-00.000Z

Я думаю, что проблема в том, что ваши реквизиты x и y неверно сконфигурированы.

<NVD3Chart id="chart" type="discreteBarChart" datum={TestData} x="test" y="test"/>

Вы устанавливаете x для проверки и y для проверки, но эти поля отсутствуют в ваших данных.

Попробуйте изменить x на ярлык и y на значение таким образом:

<NVD3Chart id="chart" type="discreteBarChart" datum={TestData} x="label" y="value"/>

Если вы передадите строку (как в этом случае), библиотека будет искать в каждом элементе данных ключ с этой строкой.

Надеюсь, это поможет.

Ха - думал, что свойства x и y были для меток оси. Большое спасибо, спасло мне много работы.