D3.js：计算条形图的x轴时间刻度？ [英] D3.js: calculate x-axis time scale for bar graph?

问题描述

我有以下数据集：

  var data = [
 {
air_used： 0.660985，
datestr：2012-12-01 00:00:00，
energy_used：0.106402 
}，
 {
air_used ：0.824746，
datestr：2013-01-01 00:00:00，
energy_used：0.250462 
} ... 
] 
  

我想绘制一个条形图（用于air_used）和线图（用于energy_used），如下所示： / p>

>

我的问题是，在使用x-scale的情况下，图形看起来像这样 - 基本上条形图处于错误的位置，最后一个条形图图表：

>

这里是一个JSFiddle的完整代码和工作图： http： //jsfiddle.net/aWJtJ/4/

为了达到我想要的效果，我需要修改x以使得在第一数据点之前和在最后数据点之后存在额外的宽度，并且使得条均向左移动每个条的宽度的一半。

任何人都可以帮助我弄清楚我需要对x-scale做什么。

试图在域名中添加一个额外的月份，这将阻止最后一个条形图从图形的末端下降，但它也增加了一个额外的刻度，我不想要，它不固定线图和刻度的位置。

如果可能，我想继续使用x轴的时间刻度，而不是序数刻度，因为我想使用D3的聪明的基于时间的刻度格式化程序，日期解析器，例如 xAxis.ticks（d3.time.weeks，2）。

解决方案

根据数据的实际范围，将您的网域展开为+1和-1个月。这将填充图表与额外的月份在任一方，然后更新条宽度添加2到数据元素的计数。

  var barRawWidth = width /（data.length + 2）; 
  

查看此小提琴： http://jsfiddle.net/reblace/aWJtJ/6/

如果您要隐藏较低和上边界月份，您可以这样进行： http://jsfiddle.net/reblace/aWJtJ/7 / ，只需增加和减去20天，而不是一整个月，但可能有更优雅的方式来做。

  var xExtent = d3.extent（data，function（d）{return d.date;}）; 
 var nxExtent = [d3.time.day.offset（xExtent [0]，-20），d3.time.day.offset（xExtent [1]，20）]; 
 x.domain（nxExtent）; 
  

I have the following dataset:

var data = [
  {
    "air_used": 0.660985, 
    "datestr": "2012-12-01 00:00:00", 
    "energy_used": 0.106402
  }, 
  {
    "air_used": 0.824746, 
    "datestr": "2013-01-01 00:00:00", 
    "energy_used": 0.250462
  } ...
]

And I want to draw a bar graph (for air_used) and line graph (for energy_used) that look like this:

My problem is that at the moment, with the x-scale I'm using, the graph looks like this - basically the bars are in the wrong position, and the last bar is falling off the chart:

Here is a JSFiddle with full code and working graph: http://jsfiddle.net/aWJtJ/4/

To achieve what I want, I think I need to amend the x-scale so that there is extra width before the first data point and after the last data point, and so that the bars are all shifted to the left by half the width of each bar.

Can anyone help me figure out what I need to do with the x-scale?

I've tried adding an extra month to the domain - that stops the last bar falling off the end of the graph, but it also adds an extra tick that I don't want, and it doesn't fix the position of the line graph and ticks.

If possible I want to continue to a time scale for the x-axis, rather than an ordinal scale, because I want to use D3's clever time-based tick formatters and date parsers, e.g. xAxis.ticks(d3.time.weeks, 2).

解决方案

Expand your domain to be +1 and -1 month from the actual extent of your data. That will pad the graph with the extra months on either side and then update the bar width to add 2 to the count of data elements.

var barRawWidth = width / (data.length + 2);

See this fiddle: http://jsfiddle.net/reblace/aWJtJ/6/

If you want to hide the lower and upper boundary months, you can hack it like this: http://jsfiddle.net/reblace/aWJtJ/7/ by just adding and subtracting 20 days instead of a whole month, but there are probably more elegant ways to do it.

var xExtent = d3.extent(data, function(d) { return d.date; });
var nxExtent = [d3.time.day.offset(xExtent[0], -20), d3.time.day.offset(xExtent[1], 20)];
x.domain(nxExtent);

这篇关于D3.js：计算条形图的x轴时间刻度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！