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

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,

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');

}