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/