请问我的折线图为啥显示不出来呢

ivy828 2017-10-26 10:47:00

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折线图尝试</title>
</head>

<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}

.axis text{
font-family: sans-serif;
font-size: 11px;
}

.point {
fill: #2ec7c9;
opacity: 0.5;
}

</style>

<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

//画布大小
var width = 800;
var height = 800;

//在body里添加一个SVG画布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);

//画布周边的空白
var padding = {left:50, right:50, top:50, bottom:50};

var dataset = [
{x: 0, y: 11}, {x: 1, y: 35},
{x: 2, y: 23}, {x: 3, y: 78},
{x: 4, y: 55}, {x: 5, y: 18},
{x: 6, y: 98}, {x: 7, y: 100},
{x: 8, y: 22}, {x: 9, y: 65}
];

//x轴的比例尺
var xScale = d3.scale.linear()
.domain([2010,2015])
.range([0, width - padding.left - padding.right]);

//y轴的比例尺
var yScale = d3.scale.linear()
.domain([200, 26000])
.range([height - padding.top - padding.bottom, 0]);

//定义x轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(7);

//定义y轴
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");

//添加x轴
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis);

//添加y轴
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);

var linePath = d3.svg.line()//创建一个直线生成器
.x(function(d){
return xScale(d.x);
})
.y(function(d){
return yScale(d.y);
});

var lines = svg.selectAll("path")
.data(dataset)
.enter()
.append("path")
.attr("transform","translate("+padding.left+","+padding.top+")")
.attr("d",linePath(d))
.attr("fill","none")
.attr("stroke-width",3)
.attr("stroke","#2ec7c9");

</script>
</body>
</html>

...全文