-
var data = [1,4,7,9,14,5,3,9,8,6]; var bar_width = 50; var bar_padding = 10; var svg_width = ( bar_width + bar_padding ) * data.length; var svg_height = 500; var scale = d3.scale.linear().domain([0, d3.max(data)]).range([svg_height, 0]); var svg = d3.select("#container").append("svg").attr({ "width": svg_width, "height": svg_height }); var bar = svg.selectAll("g").data(data).enter().append("g").attr("transform", function(d, i) { return "translate( " + i * (bar_width + bar_padding) + " , 0 )"; }); bar.append('rect').attr({ "y": function(d) { return scale(d); }, "width": bar_width, "height": function(d) { return svg_height - scale(d); } }); bar.append('text').text(function(d) { return d; }).attr({ "x": bar_width / 2, "y": function(d) { return scale(d); }, "dy": "15", "text-anchor": "middle" });查看全部
-
var data = [1,4,7,9,14,5,3,9,8,6]; var bar_height = 50; var bar_padding = 10; var svg_width = 500; var svg_height = ( bar_height + bar_padding ) * data.length; var scale = d3.scale.linear().domain([0, d3.max(data)]).range([0, svg_width]); var svg = d3.select("#container").append("svg").attr({ "width": svg_width, "height": svg_height }); var bar = svg.selectAll("g").data(data).enter().append("g").attr("transform", function(d, i) { return "translate( 0 ," + i * (bar_height + bar_padding) + ")"; }); bar.append('rect').attr({ "width": function(d) { return scale(d); }, "height": bar_height }); bar.append('text').text(function(d) { return d; }).attr({ "x": function(d) { return scale(d); }, "y": bar_height / 2, "text-anchor": "end" });查看全部
-
var svg = d3.select('#container').append('svg').attr({ width: svg_width, height: svg_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 area_generator = d3.svg.area().x(function(d, i) { return scale_x(i); }).y0(g_height).y1(function(d) { return scale_y(d); }).interpolate('cardinal'); var path = d3.select('g').append('path').attr('d', area_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).append('text').text('Price($)').attr({ 'transform': 'rotate(-90)', 'text-anchor': 'end', 'dy': '1em' });查看全部
-
g.append('g').call(y_axis).append('text').text('Price($)').attr({ 'transform': 'rotate(-90)', 'text-anchor': 'end', 'dy': '1em' });查看全部
-
var svg_width=500; var svg_height=300; var g_margin={top:50,right:100,bottom:50,left:100}; var g_width=svg_width-g_margin.right-g_margin.left; var g_height=svg_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:svg_width,height:svg_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){returnscale_x(i);}).y(function(d){returnscale_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);查看全部
-
var svg_width = 500; var svg_height = 300; var g_margin = { top: 50, right: 100, bottom: 50, left: 100 }; var g_width = svg_width - g_margin.right - g_margin.left; var g_height = svg_height - g_margin.top - g_margin.bottom; var svg = d3.select("#container").append('svg').attr('width', svg_width).attr('height', svg_height); var g = d3.select('svg').append('g').attr('transform', 'translate(' + g_margin.left + ',' + g_margin.top + ')');查看全部
-
1.select 2.selectAll 3.append 4.读取和使用数据查看全部
-
ipad看不了查看全部
-
js在html正文的最后引入查看全部
-
看我名字加Q1019017657查看全部
-
D3浏览器支持查看全部
-
D3制作图表查看全部
-
关于图像的缩放的技巧,需要单独拿出来练练~查看全部
-
定义了,还要选?查看全部
-
How D3 Selections Work? http://bost.ocks.org/mike/selection/查看全部
举报
0/150
提交
取消