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

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

我遇到的主要问题似乎是从

d3.nest

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

结果如下：

数据格式如下：

CSC     20160919    4.0
MAT     20160923    16.0

在给出的数据示例中，有两个日期，每个小子图将绘制两个日期。以这样一种方式将对应于某个特定键的日期分开会很好，即只绘制有相应分数的日期

存在一个缺陷：域必须是独立的，而在上面的示例中它们不是。 您能告诉我如何用

日期

对应于

d3.nest

中定义的特定

键

，绘制每个键的图形吗

代码的相关部分似乎如下所示：

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

---

附录 以下问题可能有用：

您还可以找到以下有用的链接：

---

假设

---

我们能将数据嵌套两次吗？首先按路线，然后按日期，然后在轴上绘制关键点的关键点？嵌套是解决问题的最佳方法吗？

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

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

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:

没有CSV很难帮助您。创建一个plunker，而不是一把小提琴，在那里你可以链接你的CSV文件。亲爱的Gerardo，我已经编辑了这篇文章，将链接添加到plunker:。很抱歉给您带来不便。非常感谢。谢谢附录的功劳！非常感谢您提供了这样一个有帮助的答案——有很多东西要向您学习！如你所愿，我会在接受你的回答之前等待，尽管我很乐意马上回答！