d3js - 线条图“圆圈”放置到线条没有正确设置

Question

我正在绘制折线图。在该图表中，我用数据值绘制一条线。它工作正常。我在线上添加点，但点没有正确定位。我在这里错过了一些计算。有没有帮我解决这个问题？

window.onload = function () {
  
  	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);
    
    
    
    svg.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);
    
    //grids
  
  
}

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>

Answer 1

代码是将circle元素添加为svg元素的子元素，但其余的graph元素是g元素的子元素，它是svg元素的子元素。 g元素具有转换变换。需要添加圆元素作为g元素的子元素（即将svg.selectAll（“circle.line”）更改为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>