D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Xychen1994
Full window
Github gist
fresh block2222
Built with
blockbuilder.org
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Page Template</title> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> <script type="text/javascript"> // Your beautiful D3 code will go here var width = 400; //画布的宽度 var height = 400; //画布的高度 d3.csv("https://www.census.gov/hhes/socdemo/education/data/sipp/2009/files/Table%202J.csv",function(error,csvdata){ if(error){ console.log(error); } console.log(csvdata); }); var svg = d3.select("body") //选择文档中的body元素 .append("svg") //添加一个svg元素 .attr("width", width) //设定宽度 .attr("height", height); //设定高度 var padding = {left:30, right:30, top:20, bottom:20}; var dataset = [10, 20, 30, 40, 33, 24, 12, 5]; var xScale = d3.scaleBand() .domain(d3.range(dataset.length)) .range([0, width - padding.left - padding.right]) var yScale = d3.scaleLinear() .domain([0,d3.max(dataset)]) .range([height - padding.top - padding.bottom, 0]); //定义x轴 var xAxis = d3.axisBottom(xScale) //定义y轴 var yAxis = d3.axisLeft(yScale) var rectPadding = 4; var rects = svg.selectAll(".MyRect") .data(dataset) .enter() .append("rect") .attr("class","MyRect") .attr("transform","translate(" + padding.left + "," + padding.top + ")") .attr("x", function(d,i){ return xScale(i) + rectPadding/2; } ) .attr("y",function(d){ return yScale(d); }) .attr("width", xScale.bandwidth() - rectPadding ) .attr("height", function(d){ return height - padding.top - padding.bottom - yScale(d); }); var texts = svg.selectAll(".MyText") .data(dataset) .enter() .append("text") .attr("class","MyText") .attr("transform","translate(" + padding.left + "," + padding.top + ")") .attr("x", function(d,i){ return xScale(i) + rectPadding/2; } ) .attr("y",function(d){ var min = yScale.domain()[0]; return yScale(min); }) .transition() .delay(function(d,i){ return i * 200; }) .duration(2000) .attr("y",function(d){ return yScale(d); }) .attr("dx",function(){ return (xScale.bandwidth() - rectPadding)/2; }) .attr("dy",function(d){ return 20; }) .text(function(d){ return d; }) ; 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); </script> </body> </html>
https://d3js.org/d3.v4.min.js