在D3.js中的多个小条形图下为轴绘制单独的域 [英] Drawing Separate Domains for Axes under Multiple Small Barcharts in D3.js

问题描述

我的意图是在该示例.

我遇到的主要问题似乎是从d3.nest的输出中提取特定键的值并定义与每个键相对应的域的问题.当绘制所有值(在域中绘制日期)时，就会出现问题.由于并非每个键都具有与所有可能的日期相对应的值，因此在右侧绘​​制了一条尾巴，这会破坏顺序.您能告诉我如何固定吗?如何从绘制的值集中删除没有相应输出的输入?

The main problem I am stuck on seems to be the problem of extracting values for a particular key from the output of d3.nest and defining the domain corresponding to each key. The problem arises when plotting all the values, for which the dates are drawn in the domain. Since not each key has a value corresponding to all possible dates, there is a tail plotted on the right, which breaks the order. Could you please tell me how it can be fixed, how can the inputs without a corresponding output be removed from the plotted set of values?

这是结果:

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

数据采用以下格式:

CSC     20160919    4.0
MAT     20160923    16.0

在给定的示例数据示例中，有两个日期，每个小子图将绘制两个日期.最好以这样一种方式来分隔与特定键相对应的日期，以便仅绘制那些具有相应分数的日期.

In the example sample of data given, there are two dates, and two dates are going to be plotted for each small subgraph. It would be great to separate the dates corresponding to a particular key in such a way that only those dates for which there is a corresponding score are plotted.

有一个缺陷:域必须是分开的，而在上面的示例中则不是. 您能否告诉我如何用d3.nest中定义的特定key对应的date绘制每个键的图形?

There is a deficiency: the domains must be separate, while in the example above they are not. Could you please tell me how I can plot the graphs for each key with the date corresponding to a particular key as defined in d3.nest?

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

The relevant part of the code seems to be here:

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

---

附录

以下问题可能会有用:

---

APPENDIX

The following questions can be useful:

D3.js绑定了反对数据并为每个键附加

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

您还可以找到以下链接有帮助:

You can also find the following links helpful:

分组条形图

教程:分组条形图

分组数据

假设

我们可以嵌套两次数据，首先是按顺序，然后是按日期，然后在轴上绘制关键点的关键点?嵌套是解决问题的最佳方法吗?

Can we nest the data twice, first by course, then by date, and then plot keys' keys on the axes? Is nesting the best way to approach the problem at all?

推荐答案

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

Here is my solution (warning: I'm the first one to admit that my code is too complicated. Let's see if someone else comes with a simpler solution).

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

First, we create an empty object:

var xScale = {};

并使用两个函数填充这个新对象，每个函数分别用于不同的比例尺.

And populate this new object with two functions, one for each different scale.

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

此后，我们将有两种不同的比例尺:

After this, we'll have two different scales:

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

现在，您可以在栏中使用那些刻度，但不能直接使用.我们必须定义在什么SVG中将使用什么比例.

Now you can use those scales in your bars, but not directly. We have to define what scale is going to be used in what SVG.

为此，首先，在每个SVG的数据中获取key属性，然后使用该值访问xScale中的正确对象，该对象包含适当的比例尺:

To do that, firstly, we'll get the key property in the data for each SVG, and then using this value to access the correct object inside xScale, which contains the proper scale:

.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的值:

The most complicated part is calling the axes. Here, we'll use each to call xAxis two times, using the first argument (the datum) to get the value of 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)");
    })

这都是您更新的插件: https://plnkr.co/edit/XFKzQm0zp0MkhzK4Qt5d?p =预览

All together, this is your updated plunker: https://plnkr.co/edit/XFKzQm0zp0MkhzK4Qt5d?p=preview

这篇关于在D3.js中的多个小条形图下为轴绘制单独的域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！