前段時間做了一個關於大數據可視化的項目，用到了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>