D3条形图-最后一根条形超出X轴的末端 [英] D3 bar chart - last bar overhangs the end of the X axis

问题描述

我有一个D3堆叠条形图，该条形图工作得很好，除了最后一个条形图悬在X轴的右侧，而该轴的左侧未触及Y轴.这是因为我必须移动这些条，以便它们在刻度线上居中.我以为，如果我在两端用日期填充时间刻度就可以了，但是条形图会散开以占用可用空间.

这是一个JSFiddle: http://jsfiddle.net/goodspeedj/cvjQq/

这是X比例尺:

var main_x = d3.time.scale().range([0, main_width-axis_offset - 5]);

这是我尝试在X轴两端插入日期:

main_x.domain([
    d3.min(data.result, function(d) { 
        return d.date.setDate(d.date.getDate() - 1); 
    }), 
    d3.max(data.result, function(d) { 
        return d.date.setDate(d.date.getDate() + 1); 
    }
)]);

条形图上x属性的计算公式为:

.attr("x", function(d) { return main_x(d.date) - (main_width/len)/2; })

这是一件小事，但这确实让我很烦.谢谢！

解决方案

主要问题是您的SVG中有一个剪切路径，该路径剪切了绘图区域的某些部分.删除该图形后，您可以看到完整的图形，但是第一个和最后一个小节仍将悬挂"在轴的两端.

要更改此设置，您必须延长轴，例如在计算规模的最大值和最小值时，可以通过增加一两天的方式来实现.

I have a D3 stacked bar chart that is working great except that the last bar overhangs the right side of X axis and the left side of the axis is not touching the Y axis. This is because I had to move the bars so that they would be centered over the tick lines. I thought that if I padded the time scale by a date on either end that would take care of it, but instead the bars just spread out to take up the available space.

Here is a JSFiddle: http://jsfiddle.net/goodspeedj/cvjQq/

Here is the X scale:

var main_x = d3.time.scale().range([0, main_width-axis_offset - 5]);

This is my attempt to pad the X axis by a date on either end:

main_x.domain([
    d3.min(data.result, function(d) { 
        return d.date.setDate(d.date.getDate() - 1); 
    }), 
    d3.max(data.result, function(d) { 
        return d.date.setDate(d.date.getDate() + 1); 
    }
)]);

The calculation for the x attribute on the bars is:

.attr("x", function(d) { return main_x(d.date) - (main_width/len)/2; })

This is a minor thing, but it is really annoying me. Thanks!

解决方案

The main problem was that you had a clip path in your SVG that clipped parts of the plotting region. Once that is removed, you can see the full graph, but the first and last bars will still "hang" over the ends of the axis.

To change that, you have to extend the axis, e.g. by adding a day or two either way when computing the minimum and maximum for the scale.

这篇关于D3条形图-最后一根条形超出X轴的末端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！