D3-2
来源：互联网 发布：数据库表的设计 编辑：程序博客网 时间：2024/05/21 19:07
1.坐标轴
<html><head><meta charset="utf-8"><title>HelloWorld</title></head><style>.axis path,.axis line{fill: none;stroke: black;shape-rendering: crispEdges;}.axis text{font-family: sans-serif;font-size: 11px;}</style><body><script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script><script>var width=300;var height=300;var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);var dataset=[2.5,2.1,1.7,1.3,0.9];var linear=d3.scale.linear().domain([0,d3.max(dataset)]).range([0,250]);var linear2=d3.scale.linear().domain([0,2.5]).range([128,0]);var rectHeight=25;svg.selectAll("rect").data(dataset).enter().append("rect").attr("x",40).attr("y",function(d,i){return i*rectHeight+2;}).attr("width",function(d){return linear(d);}).attr("height",rectHeight-2).attr("fill","steelblue");var axis=d3.svg.axis().scale(linear).orient("bottom").ticks(7);var ayis=d3.svg.axis().scale(linear2).orient("left").ticks(7);svg.append("g").attr("class","axis").attr("transform","translate(40,130)").call(axis);svg.append("g").attr("class","axis").attr("transform","translate(40,2)").call(ayis);</script></body></html>2.完整的柱形图
<html><head><meta charset="utf-8"><title>HelloWorld</title></head><style>.axis path,.axis line{fill: none;stroke: black;shape-rendering: crispEdges;}.axis text{font-family: sans-serif;font-size: 11px;}.MyRect{fill:steelblue;}.MyText{fill:white;text-anchor:middle;}</style><body><script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script><script>var width=400;var height=400;var svg=d3.select("body").append("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];//x轴的比例尺var xScale = d3.scale.ordinal().domain(d3.range(dataset.length)).rangeRoundBands([0, width - padding.left - padding.right]);//y轴的比例尺var yScale = d3.scale.linear().domain([0,d3.max(dataset)]).range([height - padding.top - padding.bottom, 0]);//定义x轴var xAxis = d3.svg.axis().scale(xScale).orient("bottom");//定义y轴var yAxis = d3.svg.axis().scale(yScale).orient("left");//矩形之间的空白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.rangeBand() - 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){return yScale(d);}).attr("dx",function(){return (xScale.rangeBand()-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);svg.append("g").attr("class","axis").attr("transform","translate("+padding.left+","+padding.top+")").call(yAxis);</script></body></html>3.动态：
<html><head><meta charset="utf-8"><title>HelloWorld</title></head><style></style><body><script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script><script>var width=400;var height=400;var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);var circle1=svg.append("circle").attr("cx",100).attr("cy",100).attr("r",45).style("fill","green");circle1.transition().duration(1000).attr("cx",300);var circle2=svg.append("circle").attr("cx",100).attr("cy",100).attr("r",45).style("fill","green");circle2.transition().duration(1500).attr("cx",300).style("fill","red");var circle3=svg.append("circle").attr("cx",100).attr("cy",100).attr("r",45).style("fill","green");circle3.transition().duration(2000).ease("bounce").attr("cx",300).style("fill","yellow").attr("r",35);</script></body></html>柱状图动态：
<html><head><meta charset="utf-8"><title>HelloWorld</title></head><style>.axis path,.axis line{fill: none;stroke: black;shape-rendering: crispEdges;}.axis text{font-family: sans-serif;font-size: 11px;}.MyRect{fill:steelblue;}.MyText{fill:white;text-anchor:middle;}</style><body><script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script><script>var width=400;var height=400;var svg=d3.select("body").append("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];//x轴的比例尺var xScale = d3.scale.ordinal().domain(d3.range(dataset.length)).rangeRoundBands([0, width - padding.left - padding.right]);//y轴的比例尺var yScale = d3.scale.linear().domain([0,d3.max(dataset)]).range([height - padding.top - padding.bottom, 0]);//定义x轴var xAxis = d3.svg.axis().scale(xScale).orient("bottom");//定义y轴var yAxis = d3.svg.axis().scale(yScale).orient("left");//矩形之间的空白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){var min=yScale.domain()[0];return yScale(min);}).transition().delay(function(d,i){return i*200;}).duration(2000).ease("bounce").attr("y",function(d){return yScale(d);}).attr("width", xScale.rangeBand() - 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){return yScale(d);}).attr("dx",function(){return (xScale.rangeBand()-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);svg.append("g").attr("class","axis").attr("transform","translate("+padding.left+","+padding.top+")").call(yAxis);</script></body></html>4.update 和 enter的使用<html><head><meta charset="utf-8"><title>HelloWorld</title></head><style></style><body><p>1</p><p>2</p><p>3</p><script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script><script>var dataset=[3,6,9,12,15];var p=d3.select("body").selectAll("p");var update=p.data(dataset);var enter=update.enter();update.text(function(d){return "update"+d;});enter.append("p").text(function(d){return "enter" + d;});</script></body></html>Update 和 Exit 的使用
<html><head><meta charset="utf-8"><title>HelloWorld</title></head><style></style><body><p>1</p><p>2</p><p>3</p><script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script><script>var dataset=[3];var p=d3.select("body").selectAll("p");var update=p.data(dataset);var exit=update.exit();update.text(function(d){return "update"+d;});enter.exit(function(d){return "exit";});</script></body></html>5.交互式柱形图
<html><head><meta charset="utf-8"><title>HelloWorld</title></head><style>.axis path,.axis line{fill: none;stroke: black;shape-rendering: crispEdges;}.axis text{font-family: sans-serif;font-size: 11px;}.MyRect{}.MyText{fill:white;text-anchor:middle;}</style><body><script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script><script>var width=400;var height=400;var svg=d3.select("body").append("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];//x轴的比例尺var xScale = d3.scale.ordinal().domain(d3.range(dataset.length)).rangeRoundBands([0, width - padding.left - padding.right]);//y轴的比例尺var yScale = d3.scale.linear().domain([0,d3.max(dataset)]).range([height - padding.top - padding.bottom, 0]);//定义x轴var xAxis = d3.svg.axis().scale(xScale).orient("bottom");//定义y轴var yAxis = d3.svg.axis().scale(yScale).orient("left");//矩形之间的空白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.rangeBand() - rectPadding ).attr("height", function(d){return height - padding.top - padding.bottom - yScale(d);}).attr("fill","steelblue") .on("mouseover",function(d,i){d3.select(this).attr("fill","yellow");}).on("mouseout",function(d,i){d3.select(this).transition().duration(500).attr("fill","steelblue");});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){return yScale(d);}).attr("dx",function(){return (xScale.rangeBand()-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);svg.append("g").attr("class","axis").attr("transform","translate("+padding.left+","+padding.top+")").call(yAxis);</script></body></html>6.饼图<html><head><meta charset="utf-8"><title>HelloWorld</title></head><style>.axis path,.axis line{fill: none;stroke: black;shape-rendering: crispEdges;}.axis text{font-family: sans-serif;font-size: 11px;}.MyRect{}.MyText{fill:white;text-anchor:middle;}</style><body><script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script><script>var dataset=[30,10,43,55,13];var pie=d3.layout.pie();var piedata=pie(dataset);var outerRadius=150;var innerRadius=0;var arc=d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);var width=300;var height=300;var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);var arcs=svg.selectAll("g").data(piedata).enter().append("g").attr("transform","translate("+(width/2)+","+(width/2)+")");var color=d3.scale.category10();arcs.append("path").attr("fill",function(d,i){return color(i);}).attr("d",function(d){return arc(d);})arcs.append("text").attr("transform",function(d){return "translate("+arc.centroid(d)+")";}).attr("text-anchor","middle").text(function(d){return d.data;});</script></body></html>7.力导向图<html><head><meta charset="utf-8"><title>HelloWorld</title></head><style></style><body><script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script><script>var nodes = [ { name: "桂林" }, { name: "广州" }, { name: "厦门" }, { name: "杭州" }, { name: "上海" }, { name: "青岛" }, { name: "天津" } ]; var edges = [ { source : 0 , target: 1 } , { source : 0 , target: 2 } , { source : 0 , target: 3 } , { source : 1 , target: 4 } , { source : 1 , target: 5 } , { source : 1 , target: 6 } ]; var width=400; var height=400; var svg=d3.select("body") .append("svg") .attr("width",width) .attr("height",height); var force=d3.layout.force() .nodes(nodes) .links(edges) .size([width,height]) .linkDistance(150) .charge([-400]); force.start(); var svg_edges=svg.selectAll("line") .data(edges) .enter() .append("line") .style("stroke","#ccc") .style("stroke-width",1); var color=d3.scale.category20(); var svg_nodes=svg.selectAll("circle") .data(nodes) .enter() .append("circle") .attr("r",20) .style("fill",function(d,i){return color(i); }) .call(force.drag); var svg_texts=svg.selectAll("text") .data(nodes) .enter() .append("text") .style("fill","black") .attr("dx",20) .attr("dy",8) .text(function(d){return d.name; }); force.on("tick",function(){svg_edges.attr("x1",function(d){return d.source.x;}).attr("y1",function(d){return d.source.y;}).attr("x2",function(d){return d.target.x;}).attr("y2",function(d){return d.target.y;})svg_nodes.attr("cx",function(d){return d.x;}).attr("cy",function(d){return d.y;})svg_texts.attr("x",function(d){return d.x;}).attr("y",function(d){return d.y;}); })</script></body></html>8.地图 需要搭建服务器
<html><head><meta charset="utf-8"><title>HelloWorld</title></head><style></style><body><script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script><script>var width=1000;var height=1000;var svg=d3.select("body").append("svg").attr("width",width).attr("height",height).append("g").attr("transform","translate(0,0)");var projection=d3.geo.mercator().center([107,31]).scale(850).translate([width/2,height/2]);var path=d3.geo.path().projection(projection);d3.json("china.geojson",function(error,root){if(error)return console.error(error);console.log(root.features);svg.selectAll("path").data(root.features).enter().append("path").attr("stroke","#000").attr("stroke-width",1).attr("fill",function(d,i){return color(i);}).attr("d",path).on("mouseover",function(d,i){d3.select(this).attr("fill","yellow");}).on("mouseout",function(d,i){d3.select(this).attr("fill",color(i));})})</script></body></html>阅读全文
0 0
- D3-2
- 【D3】D3.js使用教程(2)-绘图
- d3.js读书笔记-2
- d3
- D3
- d3
- D3
- D3
- D3
- D3
- D3
- D3.js version4教程(2)
- Getting Started with D3 [Part 2]
- d3系列2--api攻坚战02
- d3系列2--api攻坚战03
- d3系列2--api攻坚战04
- d3系列2--api攻坚战05
- d3系列2--api攻坚战06
- SQL Server存储过程返回参数
- 【广州天然气】使用规则总结
- selenium 的基础
- Python爬虫之路——1.从需求出发的学习，requests库的使用
- 项目中使用JsonSerializer将JavaBean中Date毫秒级转秒级的简便方法
- D3-2
- JNI 实战全面解析
- LeetCode-2. Add Two Numbers
- phpcms起步 模板公共头部和尾部的调用
- select 检索数据
- 资源查阅
- python3 爬虫 xicidaili.com 实战
- java实体类的Serializable机制
- Spring Cloud分布式微服务架构图
