d3.js-v4 диаграмма сложенными столбцами

Question

У меня возникла проблема с созданием штабелированной гистограммы.

я сделал следующий пример, и это нормально http://bl.ocks.org/mbostock/3886208

Но теперь у меня есть другой формат данных: (это короткий пример моих данных)

var data = [ 
    { 
    "PERIOD": 2014001, 
    "SUBMITTER": "oanikit2", 
    "distr_count": 16 
    }, 
    { 
    "PERIOD": 2014001, 
    "SUBMITTER": "nvlodavs", 
    "distr_count": 21 
    }, 
    { 
    "PERIOD": 2014001, 
    "SUBMITTER": "manufrie", 
    "distr_count": 39 
    }, 
    { 
    "PERIOD": 2014001, 
    "SUBMITTER": "mtalyshi", 
    "distr_count": 14 
    } 
] 

с использованием вложенных я преобразовал его в : (пример коротких данных ниже)

var nested = d3.nest().key(function (d){return d.SUBMITTER}).entries(data); 
    d3.select("body").append("pre").text(JSON.stringify(nested,null,2)); //just to render data on page 

[ 
    { 
    "key": "oanikit2", 
    "values": [ 
     { 
     "PERIOD": 2014001, 
     "SUBMITTER": "oanikit2", 
     "distr_count": 16 
     }, 
     { 
     "PERIOD": 2014002, 
     "SUBMITTER": "oanikit2", 
     "distr_count": 18 
     } 
    ] 
    }, 
    { 
    "key": "nvlodavs", 
    "values": [ 
     { 
     "PERIOD": 2014001, 
     "SUBMITTER": "nvlodavs", 
     "distr_count": 21 
     }, 
     { 
     "PERIOD": 2014002, 
     "SUBMITTER": "nvlodavs", 
     "distr_count": 24 
     } 
    ] 
    } 
] 

, но понятия не имею, как двигаться дальше. Как получить значения y0? нужна серия на PERIOD и сложена SUBMITTER с указанием значения_распределения.

Пробовал следовать другим примерам штабелированных баров, , но все они о v3. Я новичок в D3, поэтому решил начать с v4 с самого начала. Но в Интернете слишком мало примеров.

Возможно, у вас есть больше примеров (ссылок), как использовать D3 v4 (штабелированные бары)?

p.s. также отправил в Google вопросы (не могу дать ссылку из-за моей репутации)

Answer 1

У меня такая же проблема. Похоже, что новый d3.stack v4 ожидает ваши данные будут:

date | apples| oranges| feijoas 
-----|-------|--------|------- 
2015 | 10 | 20  | 30 
2016 | 5  | 10  | 15 

Таким образом, кажется, что это не будет работать с выходным гнездом