-
- 雨谷 2017-03-09
- //竖直柱状图标（另一种方式） var data = [1,4,7,2,9,6,5,16], bar_height = 50, bar_padding = 10, svg_height = 500, svg_width = (bar_height+bar_padding)*data.length; var scale = d3.scale.linear() .domain([0,d3.max(data)]) .range([0,svg_height]); var svg = d3.select('#container') .append('svg') .attr('width',svg_width) .attr('height',svg_height) //enter undate exit var bar = svg.selectAll('g') .data(data) .enter() .append('g') .attr('transform',function(d,i){return 'translate('+i*(bar_height+bar_padding)+','+(svg_height-scale(d))+')';}) bar.append('rect') .attr({ "width": bar_height, "height": function(d){return scale(d)} }) .style('fill','steelblue'); //形成了一个新的坐标系 bar.append('text') .text(function(d){return d;}) .attr({ 'x':bar_height/2, 'y':0, "dy":15, 'text-anchor':'end' })
- 0赞 · 0采集
-
- IceCry 2014-12-23
- var data = [1,4,7,2,9,6,5,16], bar_width = 50, bar_padding = 10, svg_width = (bar_width+bar_padding)*data.length, 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) .attr('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);} }) .style('fill','blue'); bar.append('text') .text(function(d){return d;}) .attr({ 'x':bar_width/2, 'y':function(d){return scale(d);}, 'dy':'15', 'text-anchor':'middle' })
- 0赞 · 1采集
-
- IceCry 2014-12-23
- var data = [1,4,7,2,9,6,5,16], bar_width = 50, bar_padding = 10, svg_width = (bar_width+bar_padding)*data.length, 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) .attr('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);} }) .style('fill','blue'); bar.append('text') .text(function(d){return d;}) .attr({ 'x':bar_width/2, 'y':function(d){return scale(d);}, 'dy':'15', 'text-anchor':'middle' })
- 0赞 · 0采集
-
- Conan9912345 2014-12-09
- 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" });
- 0赞 · 0采集
数据加载中...