d3-grid.coffee

  # マス目の描画
  drawGrid : ->
    # svgにマス目を内包するグループを作成
    @svg.append('g')
      .attr(
        class : 'grid'
      )

    # マス目グループの中に水平線を追加する
    @svg.select('g.grid')
      .selectAll('line.h')
      .data(d3.range(0, @chartHeight, 10))
      .enter()
      .append('line')
      .attr(
        class : 'h'
        x1 : 0
        y1 : (d) -> d
        x2 : @chartWidth
        y2 : (d) -> d
      )

    # マス目グループの中に垂直線を追加する
    @svg.select('g.grid')
      .selectAll('line.v')
      .data(d3.range(0, @chartWidth, 10))
      .enter()
      .append('line')
      .attr(
        class : 'v'
        x1 : (d) -> d
        y1 : 0
        x2 : (d) -> d
        y2 : @chartHeight
       )

    # マス目のスタイリング
    @svg.selectAll('line.h,line.v')
      .attr(
       stroke : 'black'
       'stroke-dasharray' : 2
       'shape-rendering' : 'crispEdges'
      )