Question

我对React（以及一般的前端工作）相当新。如何设置React以使用NVD3？

目前我正在尝试实现react-nvd3的示例代码，但是d3函数d3.transform（）抛出了以下错误：

意外值translate（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的格式做些什么，但无法弄明白。

非常感谢帮助！

Answer 1

我认为问题是你的x和y道具配置错误。

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

您将x设置为test，y设置为test，但这些字段不存在于您的数据中。

尝试以这种方式将x更改为label，将y更改为值：

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

如果传递一个字符串（就像在这种情况下一样），库将在数据的每个项目中查找具有该字符串的键。

我希望这有帮助。

与NVD3组合设置React

1 个答案: