D3 js line chart shows dot on mouse over and mouse out - d3.js

Question

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 this. how should I do this?
After updating code dot are visible but when I scrolled graph dot was fixed at given positions, below is my zoomed function
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); });
}

Answer 1

you need to add circles where you have data points. The circles could be small, and grow or change its color on mouse over. You can add circles to your chart with
// Append circles to the chart
var circles = chartBody.selectAll('circle')
.data(data)
.attr('cx', function(d) { return x(d.date); })
.attr('cy', function(d) { return y(d.value); })
.attr('r', 10)
.attr('fill', 'blue');
Draw the points after drawing the path, so they are not hidden by the line. Regards,

Answer 2

If you are not doing it with animation, then first remove old circles using
d3.selectAll(".dot").remove();
OR
svg.selectAll(".dot").remove();
And redraw it as per your requirement, so your code will be probably as below.
function zoomed(zoomlevel) {
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").remove();
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr('cx', function(d) { return x(d.date); })
.attr('cy', function(d) { return y(d.value); })
.attr('r', zoomlevel*10) //zoomlevel can be -2,-1,1,2... except zero
.attr('fill', 'blue');
}