建立与NVD3相结合的反应
建立与NVD3相结合的反应
提问于 2016-01-27 16:20:58
我是相当新的反应(和前端工作，在总体上)。如何使设置与NVD3一起工作？
目前，我正在尝试实现反应-nvd3 3的示例代码，但是得到d3函数d3.Transform()引发的以下错误：
意外值转换(145，NaN)解析转换属性。 G.setAttribute(“转换”，字符串)；
我的代码如下：
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的格式做一些事情，但无法弄清楚。
帮助是非常感谢的！
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-01-27 18:10:57
我认为问题是你的x和y道具配置错误。
<NVD3Chart id="chart" type="discreteBarChart" datum={TestData} x="test" y="test"/>您将x设置为test，y设置为test，但这些字段不存在于数据中。
尝试用以下方式将x改为label，并将y更改为value：
<NVD3Chart id="chart" type="discreteBarChart" datum={TestData} x="label" y="value"/>如果您传递一个字符串(如本例中所示)，库将在数据的每一项中查找带有该字符串的键。
我希望这能帮上忙。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35042621
复制相关文章
相似问题
腾讯云开发者
