d3.js Сгруппированный график участка

Question

Хотелось бы спросить, можно ли построить сгруппированные квадраты по D3.js, например this example от Plotly? До сих пор я не видел ни одного примера в Интернете.

Заранее спасибо.

---

4-ый ОБНОВЛЕНИЕ: [решаемые на 3/3/2016]

Boxplot сгруппированы по датам по оси х и окрашены в соответствии с группировкой на соответствующие даты.

Решение, как показано ниже:

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); 

---

третьего ОБНОВЛЕНИЕ:

Совершено изменения формата данных. Проблема: Boxplot для обеих дат одинаковы.

---

второго UPDATE: Успели группу участков Box, но сталкивается с трудностями в форматирования данных в группы. plunker version 9

---

UPDATE: Я пытаюсь изменить первую диаграмму (Сгруппированный Bar диаграмма) групповой Boxplot. Ошибка попадания в строке 140 в index.html. 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

Answer 1

Да, это выполнимо, вот пример: https://bl.ocks.org/mbostock/4061502.

Основная идея заключается в использовании svg rectpath и circle для достижения стиля коробки и усов.

Если вы будете использовать nvd3, есть встроенный boxPlot граф (example)