下载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>
1448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
