grid - 将网格添加到 D3.js 折线图

Question

我在这里有这个折线图：

jsfiddle.net/yfqQ4/

我现在的问题是，我没有在后台使用这样的图例（y 和 x 轴）得到适当的网格：http: //lab.creativebrains.net/linechart.png

任何人都可以向我发布一个代码片段，我应该如何实现它或类似的东西？

谢谢！

Answer 1

我建议使用 d3.svg.axis().scale() 将网格绑定到您的坐标。我根据你的代码画了一个简单的例子：http: //jsfiddle.net/yfqQ4/5/

要点是使用现有的刻度 x 和 y，并使用刻度作为网格。请注意height和width是定义容器大小的变量。以下是相关代码：

var numberOfTicks = 6;

var yAxisGrid = d3.svg.axis().scale(y)
  .ticks(numberOfTicks) 
  .tickSize(width, 0)
  .tickFormat("")
  .orient("right");

var xAxisGrid = d3.svg.axis().scale(x)
  .ticks(numberOfTicks) 
  .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);

Answer 2

您可以像这样绘制背景网格：

//vertical lines
svg.selectAll(".vline").data(d3.range(26)).enter()
    .append("line")
    .attr("x1", function (d) {
    return d * 20;
})
    .attr("x2", function (d) {
    return d * 20;
})
    .attr("y1", function (d) {
    return 0;
})
    .attr("y2", function (d) {
    return 500;
})
    .style("stroke", "#eee");

// horizontal lines
svg.selectAll(".vline").data(d3.range(26)).enter()
    .append("line")
    .attr("y1", function (d) {
    return d * 20;
})
    .attr("y2", function (d) {
    return d * 20;
})
    .attr("x1", function (d) {
    return 0;
})
    .attr("x2", function (d) {
    return 500;
})
    .style("stroke", "#eee");

你可以在这里看到它是如何与你的 jsfiddle 一起工作的（更新）：http: //jsfiddle.net/cuckovic/Phzvy/