添加格来D3.js线图

Question

我有这个折线图在这里：

jsfiddle.net/yfqQ4/

我现在的问题是，我没有得到在背景中的固有网格工作与传说（y和x轴）是这样的：http://lab.creativebrains.net/linechart.png

任何人都可以张贴我的代码片段我应该如何实现它或类似的东西？

谢谢！

Answer 1

可以绘制背景网格是这样的：

//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/

Answer 2

我会建议使用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);