score:2

Accepted answer

The code is adding the circles elements as children of the svg element but the rest of the graph elements are children of a g element which is child of svg element. The g element has a translate transform. Need to add circle elements as children of the g element (i.e. change svg.selectAll("circle.line") to graph.selectAll("circle.line")).

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>


Related Query

More Query from same tag