标签：style blog http color 使用 strong 数据 art
可以到官网下载，然后引入到工程中去。
或者直接用d3远程的js，只要引入下面一行代码即可使用。
注：d3和百度的echarts中的esl.js冲突，d3会失效。
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
var svg = d3.select("#main")//选择页面中id=main的元素，也可以直接选择div,p标签等，例.select("div") .append("svg")//生成svg标签 .attr("width", w)//设定svg区域的宽度 .attr("height", h);//设定svg区域的高度
这样页面上就会有一个空白的宽为w，高为h的空白svg区域。（d3默认长度单位是px，即可省略不写px）
这个高度也可以从页面中的div获取，例如：
var h = document.getElementsByClassName("panel-body").offsetHeight;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];//用于生成柱形图的数据 svg.selectAll("rect")//选择rect，主意此时页面中没有rect（rect是英文rectangle（矩形）的缩写，是svg中内置的图形函数） .data(dataset)//传入数据 .enter()//这个enter为了根据上一行中dataset的个数，循环生成不存在的rect元素，即重复画矩形 .append("rect")//固定语法，先select选择，后enter生成，然后append绑定 .attr("x", 0)//当前的矩形左上角坐标位置 .attr("y", 0) .attr("width", 20)//矩形的宽度 .attr("height", 100);
以上代码运行之后会生成一个黑色的柱形，其实生成了20个柱子，在页面中审查元素即可发现有20个svg，只不过左上角坐标位置一样，所以生成了20个都叠在一起了，其实svg绘图还是有顺序之分的，即后生成的图形会盖住之前的，这个符合常理所以不详细说明。
这里还有一个知识点：attr和style同样都可改变element，attr可改变任意属性，style只能改变样式。
大力推荐：svg绘图基本教程
标签：style blog http color 使用 strong 数据 art
原文地址：http://www.cnblogs.com/wangder/p/3880424.html
