title: D3 js line chart shows dot on mouse over and mouse out
body: <p>In d3 js I follow line chart zoom-able graph link jsfiddle.net/KSAbK/1/ in this line graph I want to shows dot visible like <a href="http://codepen.io/jayarjo/pen/gzfyj" rel="nofollow">this</a>. how should I do this?</p>
  
  <p>After updating code dot are visible but when I scrolled graph dot was fixed at given positions, below is my zoomed function</p>
  
  <pre><code>function zoomed() {
  console.log(d3.event.translate);
  console.log(d3.event.scale);
  svg.select(".x.axis").call(xAxis);
  svg.select(".y.axis").call(yAxis);
  svg.select(".x.grid")
      .call(make_x_axis()
      .tickSize(-height, 0, 0)
      .tickFormat(""));
  svg.select(".y.grid")
      .call(make_y_axis()
      .tickSize(-width, 0, 0)
      .tickFormat(""));
  svg.select(".line")
      .attr("class", "line")
      .attr("d", line);
    svg.selectAll(".dot")
   .data(data)
   .enter().append("rect")
   .attr("class","dot")
   .attr("height",7)
   .attr("width",7)
   .attr("x", function(d) { return x(d.date); })
   .attr("y", function(d) { return y(d.value); });
   }
  </code></pre>