前段时间做了一个关于大数据可视化的项目，用到了d3.js，不得不说，对于大数据的展示，d3真是做到了极致，话不多说，直接上代码。先从最简单的数据展示开始，每天逐步更新。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="d3.v3.min.js"></script>
<title>vichun-CSDN</title>
</head>
<body>
<script>
let data={
'nodes':[
{'food':'西红柿'},
{'food':'茄子'},
{'food':'胡萝卜'},
{'food':'辣椒'},
{'food':'土豆'},
{'food':'白菜'},
{'food':'粉条'},
{'food':'山药'}
],
'links':[
{source:0,target:1},
{source:0,target:2},
{source:0,target:3},
{source:0,target:4},
{source:0,target:5},
{source:0,target:6},
{source:0,target:7}
]
};
let nodes = data.nodes;
let links = data.links;
let width = 800;
let height = 800;
let svg = d3.select('body')
.append('svg')
.attr('width',width)
.attr('height',height);
let force = d3.layout.force()
.nodes(nodes) //设定节点数组
.links(links) //设定关系数组
.size([width,height]) //设定作用域的范围
.linkDistance(300) //设定关系连线的长度
.distance(280)
.charge(-1500); //节点间的相互作用力
force.start(); //开始引力作用
// 定义一个颜色生成器，由d3提供
let color = d3.scale.category20(); //20表示可以生成20种不同的颜色
// 下边开始绘制
// 绘制节点间的关系连线
let linksLine = svg.selectAll('line')
.data(links)
.enter()
.append('line')
.style('stroke','#ccc')
.style('stroke-width',2);
// 绘制节点
let nodesCic = svg.selectAll('circle')
.data(nodes)
.enter()
.append('circle')
.attr('r',25)
.style('fill',function(d,i){
return color(i); //根据自身的索引号，自动随机获取一种背景颜色
})
.call(force.drag); //调用drag函数，是的节点可以拖动
// 给节点添加名称
let nodesTitle = svg.selectAll('text')
.data(nodes)
.enter()
.append('text')
.style('fill','#fff')
.attr("text-anchor", "middle") //是的文字居中显示在节点上
// .attr('dx',20) //自定义文字的x座标
// .attr('dy',5) //自定义文字的y座标
.text(function(d){
return d.food;
});
force.on('tick',tick);
function tick(){
// 更新连线的座标
linksLine.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;});
// 更新节点座标
nodesCic.attr('cx',function(d){return d.x;})
.attr('cy',function(d){return d.y});
// 更新文字座标
nodesTitle.attr('x',function(d){return d.x})
.attr('y',function(d){return d.y + 5});
}
</script>
</body>
</html>