javascript - Binding nested data to box plot / rectangles -

I'm still very new to D3, and trying to overlay some box plot over a line graph I am I currently have the code to overlay the box box - although I am having trouble finding out how to pair nested data to make rectangular elements all box plots.

My data is nested in such a way: databox = object {key = "Mon Jan 01 2007 ...", values ​​= [32]}, Object {key = "Mon Jan 01 2008 ...", values ​​= [32]}, etc.

and every value = [32] looks like [object {inst = 'inst1', value = 4}, object {Inst = ' Inst2 ', value = 6}, etc.

  yubox = []; Yutemp = []; (Var i = 0; i & lt; databox.length; i ++) for {tempdata = []; (Var j = 0; j & lt; databox [i] ['value']. ​​Length; j ++) {tempdata.push (databox [i] ['value'] [j] ['value']) yutemp Tempdata; } Yubox = yutemp [1] .sort (d3.ascending); Q1Val = d3.quantile (yubox, .25), intermediate val = d3 Quantile (yubox, .5), q3Val = d3.quantile (yubox, .75), iqr = q3val - q1val; . ("Square", "box") .attr ("stroke", "black") .attr ("fill", "white") .attr ('opacity', 8.) .attr ("y", y ( Q3val)) .attr ("x", -10) .attr ("height", y (q1val) - y (q3val)) .attr ("width", 20); })  

I'm hoping to match the date of X value (in the high nest), and then the box plot corresponds to 32 values ​​in each nest.

I think I have to use some type of data (function (D, I) {return i.value;}); The order of the function, but I was lost too

Any suggestions? I was watching and Dashing D3 JS, but the nesting was actually tripping me

UPDATE: I

  boxchart = svg.selectAll ("rect" ) Playing with .attr ('class', 'box') Data (databox) .enter () .append ("rect"); Console.log (databox); ("Iron", "white") .attr ('opacity', 8). ("X", function (d) {return x (d. Value [0] .date);}) "(" y "," y "(d. Height ", Y (D. 3. qantyile (yufunction, .25) - d3.quantile (yufunction, .75)) // //.attr("y"|y(q3Val)) //.attr("x", 10) // attr (frightight ", y (q1val) - y (q3val)) .attr (" width ", 20);  

and

 < Code> yufunction = function (d) {yuarray = [] for (j = 0; j & lt; d.values.length; j ++) {Yuarray.push (d.values ​​[j] .value) } Console.log (yuarray) yuarray}  

but no success yet ... I get NaN values ​​for y and height

I with it Went:

  boxchart = focus.selectAll ("Rect") .attr ('class', 'box') .data (databox) .enter () .append ("rect"); Uut = database; console.log (databox); ("iron", "white") .attr ('opacity', 8). Etter ("y", (eufunication 75)) .rrt ("x", function D) Returns X (D. value [0] .date) -10;}) .attr ("height", (Eufunnessic)) .attr ("width", 20); Yufunction75 = function (d) {yuarray = [] for (j = 0; j & lt; d.values.length; j ++) {yuarray.push (d.values ​​[j] .value)} Element (Yuarray, 0) Remove yuarray = Yuarray.sort (D3 message); Return y (d3.quantile (yuarray, .75)); }