-
看这两篇文章查看全部
-
chart D3查看全部
-
选择想要的元素查看全部
-
d3.js查看全部
-
//svg d3.csv("data.csv",type,function(data){ var width = 400; height = 400; var svg = d3.select("#contener") .append("svg") .attr("width",width) .attr("height",height); var g = svg.append("g") .attr("transform", "translate(200,200)"); var arc_generator = d3.svg.arc() .innerRadius(200) .outerRadius(400); //.tartAngle(0) //.endAngle(120 * Math.PI/180); var angle_data = d3.layout.pie() .value(function(d){ return d.pop;}) console.log(angle_data(data)) var color = d3.scale.category10(); g.selectAll("path") .data(angle_data(data)) .enter() .append("path") .attr("d", arc_generator) .style("fill",function(d,i){return color(i);}); g.selectAll("text") .data(angle_data(data)) .enter() .append("text") .text(function(d){return d.data.edu;}) .text(function(d){return "translate("+arc_generator.centroid(d)+")";}) }); function type(d){ d.pop = + d.pop; return d; }查看全部
-
先加载html5 结构文件，后加载 javascript 功能操作文件。 优点：快速？查看全部
-
// JavaScript Document var width= 500, height = 250, margin = { left:50, top:30, right:20, bottom:20,} g_width = width - margin.left-margin.right, g_height = height - margin.top - margin.bottom; //SVG var svg=d3.select("#container") .append("svg") //width,height .attr("width",width) //attribute .连接每个元素 .attr("height",height) var g = d3.select("svg") .append("g") .attr("transform","translate("+ margin.left+","+margin.top+")") var data=[1,2,6,8,7,6] var scale_x = d3.scale.linear() .domain([0,data.length-1])//输入的范围 .range([0,g_width])//输出的范围 var scale_y = d3.scale.linear() .domain([0,d3.max(data)]) .range([0,g_height]) var line_generator=d3.svg.line() .x(function(d,i){return scale_x(i);})//0,1,2,3, .y(function(d){return scale_y(d);})//1,3,5 .interpolate("cardinal")//折线变曲线 d3.select("g") .append("path") .attr("d",line_generator(data))//d="M1,0L20,40L40,60L100,100L0,200",d-path data查看全部
-
D3 为数据可视化而生 代码是由javascript写的 在浏览器上会发挥完全的特性查看全部
-
D3的介绍查看全部
-
D3制作图标查看全部
-
d3定义的不同颜色查看全部
-
按比例生成饼状图方法查看全部
-
生成饼状图查看全部
-
// JavaScript Document var width= 500, height = 250, margin = { left:50, top:30, right:20, bottom:20,} g_width = width - margin.left-margin.right, g_height = height - margin.top - margin.bottom; //SVG var svg=d3.select("#container") .append("svg") //width,height .attr("width",width) //attribute .连接每个元素 .attr("height",height) var g = d3.select("svg") .append("g") .attr("transform","translate("+ margin.left+","+margin.top+")") var data=[1,2,6,8,7,6] var scale_x = d3.scale.linear() .domain([0,data.length-1])//输入的范围 .range([0,g_width])//输出的范围 var scale_y = d3.scale.linear() .domain([0,d3.max(data)]) .range([0,g_height]) var line_generator=d3.svg.line() .x(function(d,i){return scale_x(i);})//0,1,2,3, .y(function(d){return scale_y(d);})//1,3,5 .interpolate("cardinal")//折线变曲线 d3.select("g") .append("path") .attr("d",line_generator(data))//d="M1,0L20,40L40,60L100,100L0,200",d-path data查看全部
-
离散缩放查看全部
举报
0/150
提交
取消