Javascript D3 -网格当轴在页面的中间

我有以下D3图表（使用12842311作为输入）：

加载图表后，单击网格按钮（仅在加载后）。将出现一个网格。明显的问题是垂直线只在图表的上半部分

这是因为据我所知，D3只允许您为记号的开始指定偏移量，我就是这样做的，然后不允许您指定结束偏移量。我还认为你必须用记号来做，否则你不知道记号的位置，除非你做一些复杂的事情

我怎样才能绕过这个限制，在x轴上做一个垂直线的网格呢？看起来应该不难。我是否正在以正确的方式创建网格

var xAxis = d3.svg.axis().orient("bottom").scale(x).ticks(15);

svg.append("g").attr("class","x axis").call(xAxis).attr("transform","translate(60, " + height + ")");

---

您可以创建两组勾号SVG元素，一个在正方向扩展，另一个在负方向扩展

修改d3设置以包括另一个或两个轴，但这次在

调用

方法中包括修改后的

勾选

参数：

Dim xAxis = d3.svg.axis().scale(...).ticks(... // define your xAxis generator

Dim xAxisSVG = d3.selectAll(...)... // and your standared axis
        .call(xAxis);

Dim xPositiveTicks = d3.selectAll(...)... // positive grid lines
        .call(xAxis.tickSize(height));

Dim xNegativeTicks = d3.selecatAll(...)... // negative grid lines
        .call(xAxis.tickSize(-1 * height));

---

我知道这还不够彻底，但这种方法在过去对我很有效。

我能做到这一点的最简单方法是手动调整并转换

勾号

  svg.selectAll(".y line")
      .attr("x2", width);

  svg.selectAll(".x line")
      .attr("y2", height)
      .attr("transform", "translate(0," + (-y(0)) + ")"); 

您可以在中看到一个工作示例。
不幸的是，这对我不起作用。我使用了这段代码，XKS也使用了类似的代码。另请参见已编辑问题的结尾。var xPositiveTicks=d3.selectAll（“.x.axis”）.call（xAxis.tickSize（height））；我在您的示例页面上没有看到网格，它不再工作了吗？你能创建一个JSFIDLE来显示问题吗？你必须点击“网格”按钮。我做到了。控制台显示未定义xAxis

。它应该只在加载图表之前说明这一点？您是先提交12842311的吗？啊，输入了号码，但在

网格
：：）之前没有点击
Go
），现在我明白了。