d3.js学习10----折线图的制作

一切尽在注释中………………

<!DOCTYPE html>

<html>

<head>

<title>ZheXian</title>

</head>

<body>

</div>

<scripttype="text/javascript">

var dataset=[5,3,1,5,2,4,2];

varxMarks=['Mon','Tues','Wed','Thur','Fri','Sat','Sun'];

var w=600;

var h=400;

var title="Beijing";

var subTitle="temperature";

//定义画布

var svg=d3.select("body")

.append("svg")

.attr("width",w)

.attr("height",h);

//添加标题

svg.append("g")

.append("text")

.text(title)

.attr("class","title")

.attr("x",220)

.attr("y",20);

//添加副标题

svg.append("g")

.append("text")

.text(subTitle)

.attr("class","subTitle")

.attr("x",220)

.attr("y",40);

//横坐标轴比例尺

var xScale = d3.scale.linear()

.domain([0,dataset.length-1])

.range([60,400]);//这个range相当于横轴的左右平移

//纵坐标轴比例尺

var yScale = d3.scale.linear()

.domain([0,d3.max(dataset)])

.range([220,60]);

//定义横轴网格线

var xInner = d3.svg.axis()

.scale(xScale)

.tickSize(-160,0,0)//调整网格线长度

.orient("bottom")

.ticks(dataset.length);

//添加横轴网格线

svg.append("g")

.attr("class","inner_line")

.attr("transform","translate(0," + 220 + ")")

//用来把纵的网格线上移的

.call(xInner)

.selectAll("text")

.text("");

//定义纵轴网格线

var yInner = d3.svg.axis()

.scale(yScale)

.tickSize(-340,0,0)

.tickFormat("")

.orient("left")

.ticks(5);

//添加纵轴网格线

var yBar=svg.append("g")

.attr("class","inner_line")

.attr("transform","translate("+60+",0)")

.call(yInner);

//定义横轴

var xAxis = d3.svg.axis()

.scale(xScale)

.orient("bottom")

.ticks(dataset.length);

//添加横坐标轴并通过编号获取对应的横轴标签

var xBar=svg.append("g")

.attr("class","axis")

.attr("transform","translate(0," + 220 + ")")//用来上下平移横轴位置

.call(xAxis)

.selectAll("text")

.text(function(d){return xMarks[d];});

//定义纵轴

var yAxis = d3.svg.axis()

.scale(yScale)

.orient("left")

.ticks(5);//这个是细分度

//添加纵轴

var yBar=svg.append("g")

.attr("class", "axis")

.attr("transform","translate("+60+",0)")

.call(yAxis);

//添加折线

var line = d3.svg.line()

.x(function(d,i){return xScale(i);})

.y(function(d){return yScale(d);});

var path=svg.append("path")

.attr("d", line(dataset))

.style("fill","#F00")

.style("fill","none")

.style("stroke-width",1)

.style("stroke","#09F")

.style("stroke-opacity",0.9);

//添加系列的小圆点

svg.selectAll("circle")

.data(dataset)

.enter()

.append("circle")

.attr("cx", function(d,i) {

return xScale(i);

})

.attr("cy", function(d) {

return yScale(d);

})

.attr("r",5)

.attr("fill","#09F");

</script>

</body>

</html>

Css文件代码：

body{

height: 100%;

}

.title{font-family:Arial,微软雅黑;font-size:18px;text-anchor:middle;}

.subTitle{font-family:Arial,宋体;font-size:12px;text-anchor:middle;fill:#666}

.axis path,

.axis line {

fill: none;

stroke: black;

shape-rendering: crispEdges;

}

.axis text {

font-family: sans-serif;

font-size: 11px;

fill:#999;

}

.inner_line path,

.inner_line line {

fill: none;

stroke:#E7E7E7;

shape-rendering: crispEdges;

}

转载地址：https://blog.csdn.net/Pitter_Patter_Bee/article/details/52915381

d3.js学习10----折线图的制作

猜你喜欢