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

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

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

【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. javascript 批改disabled值
  2. 用 Javascript 兑现锚点(Anchor)间平滑跳转
  3. 请ExtJS好手赐教，感激。
  4. JS字符串变换为日期
  5. 【】=======offsetLeft 取到奇怪的值=======
  6. 揭开Javascript闭包的真实面容
  7. 读物：JavaScript 入门 - 第4版
  8. Jsp标签掉JavaBean属性实现计数器功能应注意的有关问题
  9. js中可否实现类似Java中Map的数据结构？该怎么处理
友情链接： 爱易网 云虚拟主机技术 云服务器技术 程序设计技术 开发网站 APP开发教程
Copyright © 2013-2024 爱易网页 当前在线：452人　 网站在22时13分57秒内访问总人数：285878人 当前 21.33% 　粤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()