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

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

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

【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. 【比如在网页源文件下使用document.getElementById("xxx").style.display='none';代码，在JS外部文件怎么写？】
  2. 求一段JS,该怎么处理
  3. 关于单击文本框弹出一个新的对话框的有关问题
  4. 把普普通通javascript 替换成 coffeescript的步骤
  5. javascript如何触发F11事件让各种浏览器自动全屏
  6. jquery怎么弹出一个对话框，确认后继续
  7. jQuery的$.getJSON()步骤使用体会
  8. javascript高级程序设计中的一个函数有关问题
  9. js事件累加
友情链接： 爱易网 云虚拟主机技术 云服务器技术 程序设计技术 开发网站 APP开发教程
Copyright © 2013-2024 爱易网页 当前在线：1256人　 网站在18时20分36秒内访问总人数：212592人 当前 10.47% 　粤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()