分组条形图数据结构问题答案

【问题标题】：Grouped bar chart data structure issue分组条形图数据结构问题
【发布时间】：2016-11-02 16:31:27
【问题描述】：

我正在尝试创建一个分组条形图，x 轴上是年份，y 轴上是中间键。数据结构看起来像下面的 sn-p，即每年一个对象，包含一个由 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); });

无法理解它！

非常感谢

数据：

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

编辑：Here's a JSFiddle

【问题讨论】：

你有这个办法吗？

标签： d3.js

【解决方案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]
});

尊重您的数据

【讨论】：