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

Question

我正在自学 d3。我已经阅读了 Scott Murray 的教程，我正在阅读 D3 Tips and Tricks，并且我已经浏览了 stackoverflow。我读到“绘制网格线的正确方法等。当我有问题时，我的答案通常就在这里。但是我被困住了，这绝对是由于我的经验不足，而且我有一个 fiddle :

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

我建议使用 d3.svg.axis().scale() 将网格绑定(bind)到您的坐标。我画了一个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)