d3.js分組方塊圖

我想問一下，是否可以從Plotly中繪製D3.js像this example的分組方塊圖？到目前爲止，我還沒有在互聯網上看到任何例子。d3.js分組方塊圖

在此先感謝。

第四UPDATE：[解決上2016年3月3日]

箱線圖由日期在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);

第三UPDATE：

完成修改數據格式。問題：這兩個日期的Boxplot都是一樣的。

月2日更新：管理到組的箱形圖，但數據格式面臨的困難進行分組。 plunker version 9

更新：我試圖改變第一個圖表（分組條形圖）以分組箱線圖。在index.html的第140行出現錯誤。 plunker version 1。

state.selectAll(".box") \t  
 
    .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

來源

2016-02-26 Fallon19

是的，這是可行的，這裏有一個例子：https://bl.ocks.org/mbostock/4061502。

這裏的主要想法是使用svg rectpath和circle來實現箱子和須狀風格。

如果你會使用nvd3，有一個內置的箱線圖（example）

來源

2016-02-26 07:10:04

謝謝你的例子，但我所尋找的是分組箱線圖。我嘗試過nvd3，但它不支持對盒子圖進行分組。（文檔：https：//nvd3-community.github.io/nvd3/examples/documentation.html#boxPlotChart） – Fallon19

d3.js分組方塊圖

回答

相關問題