[Solved]-d3js - line chart `circle` placement to the lines are not properly sets-d3.js

var m = [80, 80, 80, 80]; // margins
var w = 1000 - m[1] - m[3]; // width
var h = 400 - m[0] - m[2]; // height

var data = [
    {"name" : "city1", value:200},
    {"name" : "city2", value:32},
    {"name" : "city3", value:566},
    {"name" : "city4", value:124},
    {"name" : "city5", value:22},
    {"name" : "city6", value:154}
];

    
var max_value = d3.max(data, function(d) { return d.value });
    
var x = d3.scale.linear().domain([0, data.length - 1]).range([0, w]);	
var y = d3.scale.linear().domain([0, max_value]).range([h, 0]);
    
var svg = d3.select("#graph").append("svg:svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2]);
    
var graph = svg.append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
    
var xaxis = d3.svg.axis().scale(x)
    .ticksize(-h).ticksubdivide(true)
    .tickformat(function(e){
        if(math.floor(e) != e) {
            return;
        }
        return data[e].name;
    });

graph.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + h + ")")
    .call(xaxis);

var yaxisleft = d3.svg.axis().scale(y).ticksize( -w ).ticksubdivide(true).orient("left");

graph.append("svg:g")
    .attr("class", "y axis")
    .call(yaxisleft);
    
var line = d3.svg.line()
          .x(function (d, i) {return x(i);})
          .y(function (d) { return y(d.value);});
    
graph.append("path").attr("d", line(data)).style("stroke", "black").style("stroke-width", 2);

graph.selectall("circle.line")
        .data(data)
        .enter().append("svg:circle")
        .attr("class", "line")
        .style("fill", "green")
        .attr("cx", line.x())
        .attr("cy", line.y())
        .attr("r", 3.5);

body {
margin: 0;
padding: 0;
}


path {
    stroke: steelblue;
    stroke-width: 1;
    fill: none;
}
.axis {
    shape-rendering: crispedges;
}
.x.axis line {
    stroke: lightgrey;
}
.x.axis .minor {
    stroke-opacity: .5;
}
.x.axis path {
    display: none;
}
.y.axis line, .y.axis path {
    fill: none;
    stroke: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="graph"></div>