3

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

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

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

期望的结果：

想要的图表

当前结果：

当前图表

4

1 回答 1

2

这里的问题是您使用的时间尺度对于您正在尝试做的事情应该是线性的。您不希望 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 的计算方式，以确保每天之间有适当的间隔。希望这会有所帮助！

于 2013-11-14T18:23:26.337 回答