-
看這兩篇文章查看全部
-
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 結(jié)構(gòu)文件，后加載 javascript 功能操作文件。 優(yōu)點：快速？查看全部
-
// 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 為數(shù)據(jù)可視化而生 代碼是由javascript寫的 在瀏覽器上會發(fā)揮完全的特性查看全部
-
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
提交
取消