javascript - 如何不在 3D.js 条形图中显示最后一条网格线？

Question

我在一个页面中有两个水平条形图，用 D3.js 绘制。第一个条形图值从 0 到 99 (%)，第二个条形图值从 0 到 100 (%)。

我显示了第一个条形图，其 x 轴长于最大值（例如：对应于 110 的长度），每 10 到 100 个刻度和标签，以及每 10 到 100 个垂直网格（值 110 不包括在可视化）。我正在尝试对第二个条形图执行相同的操作，但在这种情况下，始终显示最后一个刻度线和对应于 110 的最后一个网格线。图中分别为第一张和第二张图。

• x 轴值最大为 100 的水平条形图

• x 轴值最大为 110 的水平条形图

这是显示第一个条形图的轴和网格的代码：

function make_x1_gridlines() {      
        return d3.axisBottom(x1)
            .ticks(10)
    }

x1.domain([0, d3.max(data, function(d) { return d.value; })+10]);
gw1.append("g")         
        .attr("class", "grid")  
        .call(make_x1_gridlines()
            .tickSize(height1)
            .tickFormat("")
            .tickSizeOuter(0)); //hide last grid line
    gw1.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + height1 + ")")  
            .call(d3.axisBottom(x1)
                .tickSizeOuter(0))
            .append("text")
                .attr("font-size", "1rem")
                .attr("y", 120)
                .attr("x", 440)
                .attr("dy", "-5rem")
                .attr("text-anchor", "end")
                .text("Percentage");                
    gw1.append("g")
            .attr("class", "axis axis--y")
            .style("text-anchor", "end")
            .call(d3.axisLeft(y1)
                .tickSizeOuter(0));     

第二个条形图的代码是相同的，但索引是 2 而不是 1。
我认为问题出在第二个条形图中最大 100 的范围内，因为如果我将值 100 更改为 99，则代码有效并且第二个图表显示正确，但我可以找到不显示最后一个刻度线和网格线的方法。

有什么建议吗？

标签： javascriptd3.jslabelbar-chartgridlines