-
沒有過多考慮瀏覽器兼容性查看全部
-
Y軸添加文本坐標(biāo)查看全部
-
// 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查看全部
-
繪制曲線查看全部
-
var width=500; var height=300; var g_margin={top:30,right:100,bottom:80,left:100}; var g_width=width-g_margin.right-g_margin.left; var g_height=height-g_margin.top-g_margin.bottom; var data=[100,50,30,10,50,60,70,50,90,100]; var svg=d3.select('#container').append('svg').attr({width:width,height:height});; var g=d3.select('svg').append('g').attr('transform','translate('+g_margin.left+','+g_margin.top+')'); 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([g_height,0]); var line_generator=d3.svg.line().x(function(d,i){return scale_x(i);}).y(function(d){return scale_y(d);}) .interpolate('cardinal'); var path=d3.select('g').append('path').attr('d',line_generator(data)); var x_axis=d3.svg.axis().scale(scale_x); var y_axis=d3.svg.axis().scale(scale_y).orient('left'); g.append('g').call(x_axis).attr('transform','translate('+0+','+g_height+')'); g.append('g').call(y_axis)查看全部
-
g.append('g').call(x_axis).attr('transform','translate('+0+','+g_height+')'); g.append('g').call(y_axis) .append('text') .text('Price($)') .attr({ 'transform': 'rotate(-90)', 'text-anchor': 'end', 'dy': '1em' });查看全部
-
添加字母刻度的坐標(biāo)軸查看全部
-
D3簡介查看全部
-
d3筆記查看全部
-
sssss查看全部
-
ipad看不了查看全部
-
js在html正文的最后引入查看全部
-
D3瀏覽器支持查看全部
-
D3制作圖表查看全部
-
查詢網(wǎng)站對所有瀏覽器的兼容情況查看全部
舉報
0/150
提交
取消