javascript - D3.js - 特定の軸目盛りのグリッド線を描画する方法

Question

D3.js を使用していくつかの折れ線グラフを描画しようとしています。http://jsfiddle.net/BDWFW/のようなコードをいくつか見つけました。

var w = 760;
var h = 400;
var pad = 50;
var d0 = new Date("Jan 29 2011 UTC");
var d1 = new Date("March 15 2011 UTC");
var x = d3.time.scale()  .domain([d0, d1]).range([0,w]);
var y = d3.scale.linear().domain([0, 1])  .range([h,0]);

var svg = d3.select("body")
    .append("svg:svg")
    .attr("height", h + pad)
    .attr("width",  w + pad)

var vis = svg.append("svg:g")
    .attr("transform", "translate(40,20)")

var rules = vis.append("svg:g").classed("rules", true)

function make_x_axis() {
  return d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .ticks(8)
}

function make_y_axis() {
  return d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(10)
}

rules.append("svg:g").classed("grid x_grid", true)
    .attr("transform", "translate(0,"+h+")")
    .call(make_x_axis()
      .tickSize(-h,0,0)
      .tickFormat("")
    )

rules.append("svg:g").classed("grid y_grid", true)
    .call(make_y_axis()
      .tickSize(-w,0,0)
      .tickFormat("")
    )

rules.append("svg:g").classed("labels x_labels", true)
    .attr("transform", "translate(0,"+h+")")
    .call(make_x_axis()
      .tickSize(5)
      // .tickFormat(d3.time.format("%Y/%m"))
    )

rules.append("svg:g").classed("labels y_labels", true)
    .call(make_y_axis()
      .tickSubdivide(1)
      .tickSize(10, 5, 0)
    )

結果からわかるように、すべてのグリッド ラインがすべてのティックに接続されています。代わりに、特定の目盛りを選択し、それらの目盛りに対してのみグリッド線を描画したいと思います。残念ながら、D3.js でそれを行う方法がわかりません。たとえば、この例では、Feb06、Feb20、および Mar06 のグリッド線を作成するにはどうすればよいでしょうか?

D3.js がよくわからないことがあります。このグリッド線描画部分を見てください。

rules.append("svg:g").classed("grid y_grid", true)
    .call(make_y_axis()
      .tickSize(-w,0,0)
      .tickFormat("")
    )

このコードがどのようにグリッド線を描画するかについてはよくわかりません。連鎖した関数の中で、どれがそれをしているのかわかりませんでした。私のような一部の初心者ユーザーは、すべてがブラックボックスにあるように感じます。