Javascript d3网格线，已经做了一些研究，但仍然卡住了

我在自学d3。我已经阅读了Scott Murray的教程，我正在阅读D3的技巧和窍门，我已经阅读了stackoverflow。我读过“绘制网格线的正确方法”等书。当我有问题时，我的答案通常在这里。但我被卡住了，这肯定是因为我缺乏经验，我有一把小提琴：

以下是我从“绘制网格线的正确方法”中复制的片段：

我很想在y轴和x轴上画网格线，但我想我一次只做一件事

---

我尝试过使用.tickSize（），我创建了make_y_axis函数，但我遗漏了一些东西。所有建议（或向正确方向推进）非常感谢。

不确定问题出在哪里——它的工作原理是将您引用的代码复制并粘贴到JSFIDLE中。我还添加了其他网格线，并使用缩放的

.range（）

来确定每一行的长度。完整的示例。

我建议使用d3.svg.axis（）.scale（）把网格和你的坐标系在一起。我根据你的代码画了一张地图：

要点是使用现有的比例x和y，并使用刻度作为网格。由于已经定义了yAxis和xAxis，我们可以重新使用它们。以下是相关代码：

//Draw a grid
var yAxisGrid = yAxis
  .tickSize(width, 0)
  .tickFormat("")
  .orient("right")

var xAxisGrid = xAxis
  .tickSize(-height, 0)
  .tickFormat("")
  .orient("top")

svg.append("g")
  .classed('y', true)
  .classed('axis', true)
  .call(yAxisGrid)

svg.append("g")
  .classed('x', true)
  .classed('axis', true)
  .call(xAxisGrid)

---

啊哈！问题是我没有理解我复制的部分代码。谢谢！

//Draw a grid
var yAxisGrid = yAxis
  .tickSize(width, 0)
  .tickFormat("")
  .orient("right")

var xAxisGrid = xAxis
  .tickSize(-height, 0)
  .tickFormat("")
  .orient("top")

svg.append("g")
  .classed('y', true)
  .classed('axis', true)
  .call(yAxisGrid)

svg.append("g")
  .classed('x', true)
  .classed('axis', true)
  .call(xAxisGrid)