Question

我有一个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; })

这是一件小事，但这真让我烦恼。谢谢！

Answer 1

主要问题是你的SVG中有一个剪辑路径剪切了绘图区域的部分。删除后，您可以看到完整的图形，但是第一个和最后一个条形仍然会“悬挂”在轴的两端。

要更改它，您必须延长轴，例如在计算比例的最小值和最大值时，通过添加一两天的方式。

D3条形图 - 最后一个条形悬在X轴的末端

1 个答案: