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
    }

但仍然没有成功......我得到y和高度的NaN值

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

我使用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);

}

将嵌套数据绑定到框图/矩形

2 个答案: