结合 NVD3 设置 React

Question

我对 React（以及一般的前端工作）还很陌生。我如何设置 React 以与 NVD3 一起工作？

目前我正在尝试实现 react-nvd3 的示例代码，但得到 d3 函数 d3.transform() 抛出的以下错误：

Unexpected value translate(145, NaN) parsing transform attribute.

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 设置为测试，将 y 设置为测试，但您的数据中不存在这些字段。

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

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

如果您传递一个字符串（如本例），库将在每个数据项中查找具有该字符串的键。

希望对您有所帮助。

结合 NVD3 设置 React

Setting up React in combination with NVD3

d3.js

reactjs

nvd3.js