Вывод данных структуры столбчатой ​​диаграммы

Question

Я пытаюсь создать сгруппированную гистограмму с годами по оси x и медианную клавишу по оси y. Структура данных выглядит как фрагмент под, т.е. один объект в год, содержащий массив из двух объектов, содержащих себя, что я хочу построить.

// Draw bars 
var groups = g.selectAll(".groups") 
    .data(data) 
    .enter().append("g") 
    .attr("class", "groups") 

groups.selectAll("bar") 
    .data(function(d) { console.log("d is", d); return d }) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return x(d.date); }) 
    .attr("y", function(d) { return y(d.median); }) 
    .attr("width", 35) 
    .attr("height", function(d) { return height - y(d.median); }); 

Невозможно остричь голову!

Большое спасибо

---

данные:

const data = [ 
    { 
     "key": "2011", 
     "values": [ 
      { 
      "date": "Sat Jan 01 2011 00:00:00 GMT+00 (GMT)", 
      "median": 7.5 
      } 
     ] 
    }, 
    { 
     "key": "2012", 
     "values": [ 
      { 
      "date": "Sun Jan 01 2011 00:00:00 GMT+00 (GMT)", 
      "median": 7.2 
      } 
     ] 
    } 
] 

---

Edit: Here's a JSFiddle

Answer 1

Ваша проблема исходит от этой функции:

data.forEach(function(d) { 
    d.date = parseTime(d[dateInput]); 
    d.median = +d[medianInput] 
}); 

должна быть

data.forEach(function(d) { 
    d.date = parseTime(d.values[0][dateInput]); 
    d.median = +d.values[0][medianInput] 
}); 

соблюдать данные