d3.js Grouped Box情节

Question

我想问一下，是否可以通过Plotly的this example等D3.js绘制分组箱形图？到目前为止，我还没有在互联网上看到任何例子。

提前致谢。

第4次更新：[2016年3月3日解决]

Boxplot按日期在x轴分组，并根据相应日期的分组进行着色。

解决方案如下：

var state = svg1.selectAll(".state2")
  .data(dataset2)
.enter().append("g")
  .attr("class", "state")
  .attr("transform", function(d) { return "translate(" +  x0(d.Date)  + ",0)"; } );


state.selectAll(".box")
      .data(function(d) { return d.Data; })
      .enter().append("g")
        .attr("transform", function(d) { return "translate(" +  x_1(d.group)  + ",0)"; } )
      .call(boxplot);

第3次更新：

完成修改数据格式。 问题：两个日期的Boxplot是相同的。

第二次更新： 管理将Box图分组，但在将数据格式化为组时遇到困难。 plunker version 9

更新： 我正在尝试将第一张图表（Grouped Bar chart）更改为Grouped Boxplot。在index.html的第140行命中错误。 plunker version 1。

state.selectAll(".box")	   
  .data(function(d) { return d.data; })
  .enter().append("g")
  .attr("transform", function(d) { return "translate(" +  x_1(d)  + "," + margin.top + ")"; } )
  .call(boxplot.width(x0.rangeBand()));  //This line

Answer 1

是的，这是可行的，这是一个例子：https://bl.ocks.org/mbostock/4061502。

这里的主要想法是使用svg rect path和circle来实现盒子和胡须样式。

如果您愿意使用nvd3，则会有一个内置的boxPlot图表（example）