title: d3js chart with crosshair as tooltip: How to Add 2 lines which intersect at cursor position
body: <p>This example from Mike Bostock shows a tooltip that I am trying to replicate (circle + text element: <a href="http://bl.ocks.org/mbostock/3902569" rel="nofollow">http://bl.ocks.org/mbostock/3902569</a> ).</p>
  
  <p>However, the twist here is that I would like to get rid of the circle, and replace it with cross-hairs, keeping the functionality the same.  My partially functional code is here (line 164 and beyond pasted below: <a href="http://tributary.io/inlet/8075741" rel="nofollow">http://tributary.io/inlet/8075741</a> ).</p>
  
  <p>Despite adding a second line element the vertical line will not render, whereas the horizontal line works as intended.</p>
  
  <pre><code>// add cross hairs and floating value on axis
  var focus = chart.append("g")
      .attr("class","focus")
      .style("display", "none");
  
      focus.append("text").attr({"x": 9, "dy": "0.35em"});
  
      // horizontal crosshair 
      focus.append("line")
            .attr({
              "x1": 0,
              "y1": 0,
              "x2": -width + margin.left,
              "y2": 0
            });
  
  
  
      /* failed attempt to dynamically add vertical line
  
      focus.append("line")
              .attr({
                "x1": d3.mouse(this)[0],
                "y1": -height + margin.top*4,
                "x2": d3.mouse(this)[0],
                "y2": height
              });
      */
  
      // failed attempt #2 to hard code vertical line
  
      focus.append("line")
          .attr({
              "x1": 300,
              "y1": -height,
              "x2": 300,
              "y2": height
          })
  
      chart.append("rect")
          .attr({"class": "overlay" , "width": width , "height": height})
          .on({
            "mouseover": function() { focus.style("display", null); },
            "mouseout":  function() { focus.style("display", "none"); }, 
            "mousemove": mousemove
          });
  
  
  
  function mousemove() {
      var x0 = xScale.invert(d3.mouse(this)[0]),
          i = bisectDate(sample2, x0, 1),
          d0 = sample2[i-1],
          d1 = sample2[i],
          d = x0 - d0.date &gt; d1.date - x0 ? d1 : d0;
  
      focus.attr("transform", "translate(" + (width - margin.right) + "," + yScale(d.close) + ")");
      focus.select("text").text("$" + d.close);
  
  }
  </code></pre>