D3基于时间的标尺溢出轴 [英] D3 Time based scales overflowing axis

问题描述

我一直在使用类似的堆叠条形图，例如 https：// bl .ocks.org / mbostock / 1134768 但是运行d3 v4，如下所示： https：// jsfiddle.net/z75L7cfz/7/

I've been working on a similar stacked bar chart to that in the example here https://bl.ocks.org/mbostock/1134768 however running d3 v4 as shown in the fiddle here https://jsfiddle.net/z75L7cfz/7/

但是，你可以看到在小提琴，我有一个问题，图中的最后一个元素延伸轴的端部。我的意思是我觉得这是有道理的。但我不知道如何在图形中显示这个显示，并确保所有的元素适合图形的提供的宽度。

However as you can see in the fiddle, I have a problem that the last element in the graph extends off the end of the axis. I mean I guess this makes sense. But I'm not sure how to make this show in the graph and ensure all the elements fit into the supplied width of the graph.

我假设我需要修改x轴的域，目前为

I assume I need to modify the domain of the x-axis which is currently

x.domain(d3.extent(data, function(d) { return d.Date; }));

但是除了以某种方式手动添加一个没有数据的额外数据点，不知道如何管理这个。

But other than somehow manually adding an extra data point with no data in but the subsequent date I'm not sure how to manage this. If anyone could supply any pointers it would be hugely appreciated!

推荐答案

对于条形图，最好使用 band scale 。它计算条尺寸，位置和填充。

For bar charts, it is best to use band scale. It calculates the bar sizes, location and padding.

var x = d3.scaleBand()
    .range([0, width])
    .padding(0.05);

这里是更新的小提琴：
https://jsfiddle.net/dtb02eze/2/

Here is the updated fiddle: https://jsfiddle.net/dtb02eze/2/

这篇关于D3基于时间的标尺溢出轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！