分组条形图数据结构问题

Question

我试图创建一个分组条形图，x轴上是年份，y轴上是中位数键。数据结构看起来像下面的代码片段，即每年一个对象，包含一个由2个对象组成的数组，其中包含我想要绘制的内容。

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

我无法理解它!

Thanks so much

---

数据:

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
            }
        ]
    }
]

---

编辑:这里有一个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]
});

尊重你的数据