D3 数据可视化的简单例子

来源：互联网发布：穿越火线免费刷枪软件编辑：程序博客网时间：2024/05/16 00:31

D3.js可以很好地展示数据，并绘制成各种表格，一个简单例子如下：

<html>  <head>  <meta charset="utf-8">  <title>做一个简单的图表</title>  </head> <body>  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  <script>var width = 300;//画布的宽度var height = 300;//画布的高度var svg = d3.select("body")//选择文档中的body元素.append("svg")//添加一个svg元素.attr("width", width)//设定宽度.attr("height", height);//设定高度var dataset = [ 250 , 210 , 170 , 130 , 90 ];var rectHeight = 25;//每个矩形所占的像素高度(包括空白)svg.selectAll("rect")  .data(dataset)  .enter()  .append("rect")  .attr("x",40)  .attr("y",function(d,i){return i * rectHeight;  })  .attr("width",function(d,i){  if(i==2){  return 20;  }     return d;  })  .attr("height",rectHeight-2)  .attr("fill","steelblue");   </script>  </body>  </html>

结果为：

参考链接：

http://blog.csdn.net/lzhlzz/article/details/39341557

0 0