D3 条形图 - 最后一根柱线悬在 X 轴的末端

D3 bar chart - last bar overhangs the end of the X axis

本文关键字：一根 最后 条形图 D3      更新时间：2023-09-26

>我有一个 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 中有一个剪辑路径，该路径剪切了打印区域的一部分。删除后，您可以看到完整的图形，但第一根和最后一根柱线仍将"悬挂"在轴的末端。

要改变这一点，您必须扩展轴，例如，在计算刻度的最小值和最大值时，无论哪种方式都增加一两天。

相关文章：