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

Question

我在教自己d3。我已经阅读了Scott Murray的教程，我正在阅读D3提示和技巧，我已经浏览了stackoverflow。我读到了“正确的方法来绘制网格线等等。当我有一个问题时，我的答案通常在这里。但是我被困住了，这肯定是由于我的经验不足，而且我有一个小提琴：

Fiddle Demo

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

    svg.selectAll("circle")
   .data(yScale.ticks())
   .enter()
    .append("circle")
       .attr("x1", margin.right)
       .attr("x2", width)   
       .attr("y1", function(d){ 
        return yScale(d[2]);
            })
       .attr("y2", function(d){ 
        return yScale(d[2]);
        })
       .attr("fill", "none")
       .attr("shape-rendering", "crispEdges")
       .attr("stroke", "black")
       .attr("stroke-width", "1px");

我想在y轴和x轴上绘制网格线，但我想我一次只做一件事。

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

Answer 1

不确定问题是什么 - 它几乎可以通过复制和粘贴你引用到jsfiddle中的代码来实现。我也添加了其他网格线，并使用比例.range()来确定每条线的长度。完整示例here。

Answer 2

我建议使用d3.svg.axis（）。scale（）将网格绑定到坐标。我根据您的代码quick example

绘制了http://jsfiddle.net/9uDMc/3/

要点是使用现有的刻度，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)