title: brush on rotated lines using d3 to create zoom effect
body: <p>I am working on <a href="http://plnkr.co/edit/pccObTgLzismI9KjQTEo?p=preview" rel="noreferrer">this plnkr</a>. I have three lines at angle 30, 45 and 60. I want to apply a brush on these lines so that when the chart is brushed the lines get redrawn at where it crossed the brushed rectangle with appropriate the values on the axis. Any help or hint to solve this problem is greatly appreciated.</p>
  
  <p>EDIT: If you have different solutions to draw the rotated lines and brush on top of them it is welcomed too. Please help.</p>
  
  <pre><code>var ga = d3.select("svg")
      .append("g")
      .attr("class", "a axis")
      .attr("transform", "translate(" + margin.left + "," + (height + margin.top) + ")")
      .selectAll("g")
      .data([30, 45, 60])
      .enter()
      .append("g")
      .attr("class", "rotatedlines")
      .attr("transform", function(d) { return "rotate(" + -d + ")"; })
      .attr("stroke-width", 1)
      .attr("stroke", "black")
      .attr("stroke-dasharray", "5,5");
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/TJ6Mm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TJ6Mm.png" alt="Example result"></a></p>