將嵌套數據綁定到box plot/rectangles

Question

對於d3我還是很新的，並且試圖在線圖頂部疊加一些箱形圖。我目前有代碼覆蓋第一個箱形圖 - 但是我很難找出如何將嵌套數據綁定到矩形元素來創建所有箱形圖。

我的數據是嵌套這樣：databox = Object { key="Mon Jan 01 2007 ..." , values =[32]}, Object {key="Mon Jan 01 2008 ..." , values = [32]}, etc.

而且每個values = [32]看起來像[Object {Inst = 'Inst1', value = 4}, Object {Inst = 'Inst2', value = 6}, etc.

yubox = []; 
    yutemp = []; 
    for (var i = 0; i < databox.length; i++){ 
     tempdata = []; 
     for (var j = 0; j < databox[i]['values'].length; j++) { 
     tempdata.push(databox[i]['values'][j]['value']) 
     } 
    yutemp.push(tempdata); 
    } 


    yubox = yutemp[1].sort(d3.ascending); 


    q1Val = d3.quantile(yubox, .25), 
    medianVal = d3.quantile(yubox, .5), 
    q3Val = d3.quantile(yubox, .75), 
    iqr = q3Val - q1Val; 

    box.append("rect")  
    .attr("class", "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); 

}) 

我希望能有x值的日期一致（在較高鳥巢） ，然後盒子圖與每個巢中的32個值一致。

我想我必須使用某種data(function(d, i) { return i.value; });類的功能，但我敢失去

有什麼建議？我正在看http://www.samselikoff.com/blog/2013/12/18/starting-out-with-d3-chart/和dashingd3js，但是嵌套真的讓我失望。

更新：我一直在玩

boxchart = svg.selectAll("rect") 
     .attr('class','box') 
     .data(databox) 
     .enter() 
     .append("rect"); 
    console.log(databox); 

boxchart 
    .data(databox) 
    .attr("class", "box") 
    .attr("stroke", "black") 
    .attr("fill", "white") 
    .attr('opacity',.8) 
    .attr("y", y(d3.quantile(yufunction , .75))) 
    .attr("x", function (d) { return x(d.values[0].date);}) 
    .attr("height", y(d3.quantile(yufunction, .25) - d3.quantile(yufunction, .75))) 
    //.attr("y",y(q3Val)) 
    //.attr("x",10) 
    //.attr("height", y(q1Val) - y(q3Val)) 
    .attr("width", 20); 

和

yufunction = function (d) { 
    yuarray = [] 
    for (j = 0; j < d.values.length; j++){ 
    yuarray.push(d.values[j].value) 
    } 
    console.log(yuarray) 
    return yuarray 
    } 

，但仍然沒有成功...我得到NaN的爲y和高度

Answer 1

我去值：

boxchart = focus.selectAll("rect") 
     .attr('class','box') 
     .data(databox) 
     .enter() 
     .append("rect"); 
    yuwhat = databox; 
    console.log(databox); 

boxchart 
.data(databox) 
.attr("class", "box") 
.attr("stroke", "black") 
.attr("fill", "white") 
.attr('opacity',.8) 
.attr("y", (yufunction75)) 
.attr("x", function (d) { return x(d.values[0].date) - 10;}) 
.attr("height", (yufunctioniqr)) 
.attr("width", 20); 

yufunction75 = function (d) { 
    yuarray = [] 
    for (j = 0; j < d.values.length; j++){ 
    yuarray.push(d.values[j].value) 
    } 
    removeElement(yuarray,0) 
    yuarray = yuarray.sort(d3.ascending); 
    return y(d3.quantile(yuarray, .75)); 
    } 

Answer 2

I使用lineArray模板來創建boxArray，然後繼續跟蹤Mike的例子來使盒子地塊與聚焦/環境中工作太...以防萬一有人好奇：

boxArray = []; 
    for (var i = 0; i < databox.length; i++){ 
     boxArray.push(drawBox(databox[i], datestart, dateend)); 
    } 

    }); 

function drawBox(series, minDate, maxDate){ 
    var data = []; 
     if (parseDate(minDate) <= series.values[0].date && series.values[0].date <= parseDate(maxDate)){ 
      data.push(series); 
     } 
    //console.log(data); 

return focus.append('rect').data(data) 
.attr("clip-path", "url(#clip)") 
.attr("class", "box") 
.attr("stroke", "black") 
.attr("fill", "white") 
.attr('opacity',.8) 
.attr("y", (yufunction75)) 
.attr("x", function (d) { return x(d.values[0].date) - 10;}) 
.attr("height", (yufunctioniqr)) 
.attr("width", 20); 

}