d3.js 分析

d3.js 是基于数据的js类库，它的作用就是把数据可视化,它可以为dom绑定数据，用数据来改变dom，举个例子：你可以用一组数据来生成html表格，也可以用一组数据生成chart图形结构，它的本质作用就是用来做基于数据的页面高效操作

使用

1 引入库 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

2 例子

<script>

//Width and height

			var w = 700;
			var h = 500;
			//Original data
			var dataset = {
				nodes: [
					{ name: "Adam" },
					{ name: "Bob" },
					{ name: "Carrie" },
					{ name: "Donovan" },
					{ name: "Edward" },
					{ name: "Felicity" },
					{ name: "George" },
					{ name: "Hannah" },
					{ name: "Iris" },
					{ name: "Jerry" }
				],
				edges: [
					{ source: 0, target: 1 },
					{ source: 0, target: 2 },
					{ source: 0, target: 3 },
					{ source: 0, target: 4 },
          { source: 0, target: 5 },
          { source: 0, target: 9 },
					{ source: 1, target: 5 },
					{ source: 2, target: 5 },
					{ source: 2, target: 5 },
					{ source: 3, target: 4 },
					{ source: 5, target: 8 },
					{ source: 5, target: 9 },
					{ source: 6, target: 7 },
					{ source: 7, target: 8 },
					{ source: 8, target: 9 }
				]
			};

var force = d3.layout.force() 
  .nodes(dataset.nodes)
  .links(dataset.edges)
  .size([w, h])
  .linkDistance([100])
  .charge([-300])
  .start();

//Easy colors accessible via a 10-step ordinal scale
var colors = d3.scale.category10();

//Create SVG element
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var edges = svg.selectAll("line") 
  .data(dataset.edges)
  .enter()
  .append("line")
  .style("stroke", "#ccc")
  .style("stroke-width", 1);

var nodes = svg.selectAll("circle") 
  .data(dataset.nodes)
  .enter()
  .append("circle")
  .attr("r", 16)
  .style("fill", function(d, i) {
    return colors(i); 
  })
  .call(force.drag);

force.on("tick", function() {
edges.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; });
nodes.attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; });
});

 </script>

出处 http://d3js.org/