【D3.V3.js系列课程】-（十）更自由的条形图
日期：2014-05-16 浏览次数：20323 次
【D3.V3.js系列教程】--（十）更自由的条形图
1、添加一个矩形
| //Width and height | |
| var w = 500; | |
| var h = 100; | |
| var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, | |
| 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; | |
| //Create SVG element | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| svg.selectAll("rect") | |
| .data(dataset) | |
| .enter() | |
| .append("rect") | |
| .attr("x", 0) | |
| .attr("y", 0) | |
| .attr("width", 20) | |
| .attr("height", 100); |
2、添加更多条
控制x坐标的起始位置（i*21）
| //Width and height | |
| var w = 500; | |
| var h = 100; | |
| var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, | |
| 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; | |
| //Create SVG element | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| svg.selectAll("rect") | |
| .data(dataset) | |
| .enter() | |
| .append("rect") | |
| .attr("x", function(d, i) { | |
| return i * 21; //Bar width of 20 plus 1 for padding | |
| }) | |
| .attr("y", 0) | |
| .attr("width", 20) | |
| .attr("height", 100); |
3、均匀的添加条-定条宽
除的方式(i * (w / dataset.length);)作为条和间隙的总宽度，在设置固定宽度小于总宽度，这时就会自然生成一个空白间隙
一句话：条的宽度固定，总宽-条宽=空白宽。空白宽取决于总宽，总宽取决于计算表达式(w / dataset.length）
| //Width and height | |
| var w = 500; | |
| var h = 100; | |
| var barPadding = 1; | |
| var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, | |
| 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; | |
| //Create SVG element | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| svg.selectAll("rect") | |
| .data(dataset) | |
| .enter() | |
