1. 爱易网页
  2. JavaSript
  3. 【D3.V3.js系列课程】-（十）更自由的条形图

【D3.V3.js系列课程】-（十）更自由的条形图

日期：2014-05-16　 浏览次数：20419 次

【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）

相关资料更多>

  1. 求JQ幻灯片的思路。思路就可以了。解决办法
  2. js或jquery 即时加减吗？解决方案
  3. 一个功能强大且施用简单的js控制网页文字或图片滚动效果的js
  4. js数组总结
  5. 一个基于jsp/servlet/javabean的存储过程or sql话语分页的例子
  6. Javascript中奇怪的函数调用，哪位高手能解释$$
  7. 全仔->js
  8. (转)jsp 九个内置对象
  9. JSP 中js传送和解析URL参数以及中文转码和解码
友情链接： 爱易网 云虚拟主机技术 云服务器技术 程序设计技术 开发网站 APP开发教程
Copyright © 2013-2025 爱易网页 当前在线：166人　 网站在19时44分59秒内访问总人数：239684人 当前 20.36% 　粤ICP备18100884号-2
//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()