在D3.js中为多个小条形图下的轴绘制单独的域

Question

我的意图是在一个具有不同域的svg中绘制多个小条形图，以该示例为基础。

我一直关注的主要问题似乎是从d3.nest的输出中提取特定密钥的值并定义与每个密钥对应的域的问题。绘制域中绘制日期的所有值时会出现问题。由于不是每个键都有一个对应于所有可能日期的值，因此在右侧绘制了一个尾部，这打破了顺序。你能告诉我如何修复它吗？如何从绘制的值集中删除没有相应输出的输入？

结果如下：

https://plnkr.co/edit/KUnMSfJwWan3JaIpZutZ/

数据的格式如下：

CSC     20160919    4.0
MAT     20160923    16.0

在给出的数据示例中，有两个日期，每个小子图将绘制两个日期。最好将与特定键对应的日期分开，这样只绘制出有相应分数的日期。

有一个缺陷：域必须是独立的，而在上面的例子中它们不是。你能告诉我如何绘制每个键的图吗？date对应于d3.nest中定义的特定key？

代码的相关部分似乎在这里：

x.domain(data.map(function(d) { return d.date; }));

这里：

svg.selectAll(".bar")
.data(function(d) {return d.values;})
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.date); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.score); })
.attr("height", function(d) { return height - y(d.score); })
.attr("fill", function(d) {return color(d.score)})

---

附录

以下问题可能有用：

D3.js将对象绑定到数据并为每个密钥追加

X、 d3.js 中多组条形图中的Y域数据绑定

您还可以找到以下链接：

分组条形图

教程：分组条形图

分组数据

---

假设

---

我们可以将数据嵌套两次吗？首先是按课程，然后是按日期，然后在轴上绘制键的键？嵌套是解决问题的最佳方式吗？

Answer 1

这是我的解决方案(警告：我是第一个承认我的代码太复杂的人。让我们看看是否有其他人提供了更简单的解决方案)。

首先，我们创建一个空对象：

var xScale = {};

并用两个函数填充这个新对象，每个函数对应一个不同的比例。

courses.forEach(function(d) {
xScale[d.key] = d3.scale.ordinal()
.rangeRoundBands([0, width], .1)
.domain(d.values.map(function(e) {
return e.date
}));
});

之后，我们将有两个不同的规模：

xScale.HIS//this is the scale for the first SVG
xScale.PHY//this is the scale for the second SVG

现在你可以在酒吧里使用这些秤，但不能直接使用。我们必须定义要在什么SVG中使用什么比例。

要做到这一点，首先，我们将在每个SVG的数据中获得key属性，然后使用该值访问xScale中的正确对象，该对象包含适当的比例：

.attr("x", function(d) {
var scale = d3.select(this.parentNode).datum().key;
return xScale[scale](d.date);
})
.attr("width", function() {
var scale = d3.select(this.parentNode).datum().key;
return xScale[scale].rangeBand()
})

最复杂的部分是调用轴。在这里，我们将使用each调用xAxis两次，使用第一个参数(数据)来获得key:的值

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.each(function(d) {
return d3.select(this).call(xAxis.scale(xScale[d.key]))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-90)");
})

总之，这是您更新的plunker：https://plnkr.co/edit/XFKzQm0zp0MkhzK4Qt5d?p=preview