在d3.js中最后切断网格线

Question

我想在图表的末尾切断网格线。如果我删除xScale中的填充，则结束标记“2016”的“16”将被切断。 我应该修复哪个部分，yScale，xScale或网格线？

                //Define X axis
                xAxis = d3.axisBottom()
                           .scale(xScale)
                           .ticks(10)
                           .tickFormat(formatTime);

                //Define Y axis
                yAxis = d3.axisLeft()
                           .scale(yScale)
                           .ticks(5);

                //Define Y axis gridlines
                function make_y_gridlines() {
                    return d3.axisLeft(yScale)
                    }

                //Create axes
                    svg.append("g")
                        .attr("class", "axis x")
                        .attr("transform", "translate(0," + (h - padding) + ")")
                        .call(xAxis);

                    svg.append("g")
                        .attr("class", "axis y")
                        .attr("transform", "translate(" + padding + ",0)")
                        .call(yAxis);

                    // add the Y gridlines
                    svg.append("g")
                        .attr("class", "grid")
                        .attr("transform", "translate(" + padding + ",0)")
                        .call(make_y_gridlines()
                            .tickSize(-w)
                            .tickFormat("")
                        )

Answer 1

由于x轴定义为：

.range([padding, w - padding * 2])

这意味着，图表从svg容器左侧的1 * padding开始，从左侧width - 2 * padding结束。这意味着图形的宽度（与svg容器的宽度相对）是width - 3 * padding。

因此，y网格线的实际大小应为width - 3 * padding。

在代码中，这意味着你只需要替换y网格线定义中的ticksize：

.tickSize(-w)

使用：

.tickSize(-w + 3*padding)

它是-(w-3*padding)，因为默认情况下，刻度线位于y轴的左侧，我们希望它们位于右侧。