d3.js - Setting up React in combination with NVD3 -

i new react (and front-end work in general). how can make set react work nvd3?

currently trying implement example code of react-nvd3, following error thrown d3 function d3.transform():

unexpected value translate(145, nan) parsing transform attribute.

g.setattribute("transform", string);

my code follows:

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') ); 

see https://jsfiddle.net/x2wuko8g/2/ guess has format of testdata, can't figure out.

help appreciated!

i think problem x , y props misconfigured.

<nvd3chart id="chart" type="discretebarchart" datum={testdata} x="test" y="test"/> 

you set x test , y test fields not present in data.

try changing x label , y value in way:

<nvd3chart id="chart" type="discretebarchart" datum={testdata} x="label" y="value"/> 

if pass string (like in case) library in each item of data key string.

i hope help.