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

Question

我在这里有这个折线图：

jsfiddle.net/yfqQ4 /

我现在的问题是，我在后台使用传奇（y和x轴）时没有得到合适的网格：http://lab.creativebrains.net/linechart.png

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

谢谢！

Answer 1

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

绘制了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/