d3.js - 多层比较直方图

Question

我需要使用 d3.js 库构建直方图。直方图应如下所示。此直方图的主要目的是比较两组结果。下图中显示的结果代表在一个月的同一天收集的数据，但在两个不同的月份(比如 1 月 1 日至 6 日(绿色)和二月(蓝色))。

我目前拥有的直方图基本上显示了正确的数据，只是它没有覆盖它们(甚至并排显示它们)。相反，它显示它们按日期排序，结果代表一月第一(向左)，结果代表二月第二(向右)。我应该怎么做才能让它们并排显示？

编辑:我在 Angular 环境中工作，我使用预建指令来显示图形。该指令的代码位于 https://github.com/fullscale/dangle/blob/master/dist/dangle.datehisto.js

想要的结果:



当前结果:

Answer 1

这里的问题是，您使用的时间刻度实际上应该与您尝试做的事情呈线性关系。您不希望 x 偏移量根据实际日期/时间增加，而只是在日期的 date.getDate() 部分增加。假设 d.time 表示与 new Date().getTime() 相同的东西，然后您可以将比例更改为线性并仅使用日期加上月份的偏移量来确定您的 x 值。这将需要您构建某种形式的图例来指示月份。

首先更改我们使用的比例:

// create x,y scales (x is inferred as time)
// var x = d3.time.scale()
//    .range([0, width]);
//
// Use linear scale since we really care about the day portion of the date/time
var x = d3.scale.linear()
      .range([0, width]);

然后计算我们的月份和日期范围:

// Get the range of months so we can use the month
// to offset the x value for overlay
var monthExtent = d3.extent(data,function(d) { 
            var date = new Date(); 
            date.setTime(d.time.getTime()); 
            return date.getMonth(); 
        });

// Get the range of days for the graph
// If you always want to display the whole month
// var dateExtent = [0,31]
//
// Otherwise calculate the range
var dateExtent = d3.extent(data,function(d) {  
            var date = new Date(); 
            date.setTime(d.time.getTime()); 
            return date.getDate(); 
        });

然后将 x 域设置为我们的日期范围:

// recalculate the x and y domains based on the new data.
 // we have to add our "interval" to the max otherwise 
 // we don't have enough room to draw the last bar.
 //
 //x.domain([
 //    d3.min(data, function(d) { 
 //        return d.time;
 //    }), 
 //    d3.max(data, function(d) { 
 //        return d.time;
 //    })
 //]);


 // Our x domain is just the range of days 
 x.domain(dateExtent);

添加色标以区分月份:

// Set up a color scale to separate months
 var color = d3.scale.category10();

现在，更改 x 属性以使用日期值加上月份的偏移量来创建叠加层。我在这里使用了 20 像素，但您可以轻松地将其更改为条宽的百分比。然后使用月份和色标添加填充属性，以便每个月都有自己的颜色。

bars.enter()
    .append('rect')
        .attr('class', 'histo rect ')
        .attr('cursor', 'pointer')
        .attr('x', function(d) {
            // Extract the day portion of the date/time
            // and then offset the rect by it's month value
            var date = new Date();
            date.setTime(d.time.getTime());
            return x(date.getDate()) + (date.getMonth() - monthExtent[0]) * 20; 
        })
        .attr("fill",function(d) { 
            var date = new Date();
            date.setTime(d.time);
            return color(date.getMonth()); 
        })
        .attr("y", function(d) { return height })
        .attr('width', barWidth)
        .transition()
            .delay(function (d,i){ return i * 0; })
            .duration(500)
                .attr('height', function(d) { return height - y(d.count); })
                .attr('y', function(d) { return y(d.count); });

最后，您可能需要更改 barWidth 的计算方式，以确保每天之间有适当的空间量。希望这会有所帮助!