添加格來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);