正文

d3.js画折线图

IP云
IP云V管理员/0 阅读
08/15
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

下载d3.zip，并解压到网页文件所在的文件夹

windows下，在命令行进入网页文件夹，输入

python -m http.server

在浏览器中输入127.0.0.1:8000/xxx.html

示例如下，html文件和data存在同一个目录下

https://bl.ocks.org/mbostock/3884955

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke-width: 1;
fill: none;
}.axis--x {
shape-rendering: crispEdges;
}.axis--x line {
stroke: lightgrey;
}
.axis--x .minor {
stroke-opacity: .5;
} .axis--x path {
display: none; //draw a transparent line
}
.axis--y path {
fill: none;
stroke: #000;
}
.axis text {
font-family: sans-serif;
font-size: 8px;
}</style>
<body>
<svg width="600" height="225"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>// basic svg setting
var svg = d3.select("svg"),
margin = {top: 20, right: 300, bottom: 50, left: 50},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom;
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");// set the x-axis as time axis. Do NOT use in this case.
// If you want to use this function, you can search it on-line.
//var parseTime = d3.timeParse("%Y%m%d");//set x,y,z axis. Z axis means the twenty different color.
var x = d3.scaleLinear().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = d3.scaleOrdinal(d3.schemeCategory20);//set the outlook of x and y axis //define a convenience function to create a line on the chart
var line = d3.line().curve(d3.curveBasis)
.x(function(d) { return x(d.step); })
.y(function(d) { return y(d.temperature); });//read the data from tsv and draw line chart
d3.tsv("data.tsv", type, function(error, data) {
if (error) throw error; var cities = data.columns.slice(1).map(function(id) { //id means the name of city
return {
id: id,
values : data.map(function(d) {
return {step: d.step, temperature: d[id]};
})
};
}); //further set x-axis and y-axis
x.domain(d3.extent(data, function(d) { return d.step; }));
y.domain([0,300]);
z.domain(cities.map(function(c) { return c.id; })); var xAxis = d3.axisBottom(x).scale(x).tickSize(-height);
var yAxis = d3.axisLeft(y).scale(y).ticks(10);// X-AXIS LABEL
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width/2)
.attr("y", 18)
.style("text-anchor", "middle")
.style("fill", "#000")
.style("font-weight", "bold")
.text("x-axis label");// Y-AXIS LABEL
g.append("g")
.attr("class", "axis axis--y")
.attr("transform", "translate(-15,0)")
.call(d3.axisLeft(y).ticks(4))
.append("text")
.attr("x", -(height/2))
.attr("y", -29)
.attr("dy", "0.32em")
.attr("transform", "rotate(-90)")
.style("text-anchor", "middle")
.style("fill", "#000")
.style("font-weight", "bold")
.text("y-axis label");// ADD TITLE
g.append("text")
.attr("class", "title")
.attr("x", width/2)
.attr("y", 5 - (margin.top/2))
.attr("text-anchor", "middle")
.style("fill", "#000")
.style("font", "8px sans-serif")
.style("font-weight", "bold")
.text("TITLE"); var city = g.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");//Draw the line and set the legend on the right of the chart ONE BY ONE
for (var i=0;i<cities.length-1;i++){// DRAW THE LINE
city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(cities[i].values); })
.style("stroke", z(cities[i].id)); //color//settting of legend
var w = 10, //the vertical distance between neighbouring legend
l = -20, //left-most distance of the legend
r = 0, //right-most distance of the legend
t = -10; // up-most distance of the legend// draw the legend on the right of the chart
city.append("text")
.datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
.attr("transform", "translate(" + (margin.left + width +r) + ","
+ (w*i + margin.top + height/2 - w*cities.length/2 + t)
+ ")")
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "8px sans-serif")
.text(cities[i].id);// draw the short line of legend to identify each line in the line chart
city.append("line")
.attr("class", "line dataset-" + 0)
.style("stroke", z(cities[i].id))
.attr("stroke-width", "2")
.attr("x1", margin.left + width + l)
.attr("x2", margin.left + width + r)
.attr("y1", w*i + margin.top + height/2 -
w*cities.length/2 + t)
.attr("y2", w*i + margin.top + height/2 -
w*cities.length/2 + t);
}//In this case, a unique line chart need to be underscored.
//So, I draw the unique line separately with black.
var i = 3; //the unique line is the 3rd coloum city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(cities[i].values); })
.style("stroke", "#000000"); city.append("text")
.datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
.attr("transform", "translate(" + (margin.left + width + r) + ","
+ (w*i + margin.top + height/2 - w*cities.length/2 + t)
+ ")")
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "8px sans-serif")
.text(cities[i].id); city.append("line")
.attr("class", "line dataset-" + 0)
.style("stroke","#000000")
.attr("stroke-width", "2")
.attr("x1", margin.left + width + l)
.attr("x2", margin.left + width + r)
.attr("y1", w*i + margin.top + height/2 -
w*cities.length/2 + t)
.attr("y2", w*i + margin.top + height/2 -
w*cities.length/2 + t); });//get the tsv file data
function type(d, _, columns) {
d.step = +d.step;
for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
return d;
}</script>
</body>