//copy勸言：多研究沒有壞處，隨copy可直接使用，但建議研究一下；
操作節點，添加自己想要的效果；
例如：不要 顏色原點，更換圖片；
點擊效果：隱藏顯示，是否顯示連線，連線顏色是否統一；
<html>
<head>
<meta charset="utf-8">
<title>力導向圖</title>
</head>
<style>
svg{
height: 100%;
width: 100%;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var nodes = [ { name: "桂林" }, { name: "廣州" },
{ name: "廈門" }, { name: "杭州" },
{ name: "上海" }, { name: "青島" },
{ name: "上海" }, { name: "青島" },
{ name: "上海" }, { name: "青島" },
{ name: "天津" } ];
var edges = [ { source : 0 , target: 1 } , { source : 0 , target: 2 } ,
{ source : 2 , target: 6 } , { source : 2 , target: 7 } ,
{ source : 3 , target: 8 } , { source : 3 , target: 9 } ,
{ source : 0 , target: 3 } , { source : 1 , target: 4 } ,
{ source : 1 , target: 5 } , { source : 1 , target: 10 } ];
var width = 1161;
var height = 833;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var force = d3.layout.force()
.nodes(nodes) //指定節點數組
.links(edges) //指定連線數組
.size([width,height]) //指定范圍
.linkDistance(150) //指定連線長度
.charge(-400); //相互之間的作用力
force.start(); //開始作用
console.log(nodes);
console.log(edges);
//添加連線
var svg_edges = svg.selectAll("line")
.data(edges)
.enter()
.append("line")
.style("stroke","#ccc")
.style("stroke-width",1);
var color = d3.scale.category20();
//添加節點
var svg_nodes = svg.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
.attr("r",20)
.style("fill",function(d,i){
return color(i);
})
.call(force.drag); //使得節點能夠拖動
//添加描述節點的文字
var svg_texts = svg.selectAll("text")
.data(nodes)
.enter()
.append("text")
.style("fill", "black")
.attr("dx", 20)
.attr("dy", 8)
.text(function(d){
return d.name;
});
force.on("tick", function(){ //對於每一個時間間隔
//更新連線坐標
svg_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; });
//更新節點坐標
svg_nodes.attr("cx",function(d){ return d.x; })
.attr("cy",function(d){ return d.y; });
//更新文字坐標
svg_texts.attr("x", function(d){ return d.x; })
.attr("y", function(d){ return d.y; });
});
</script>
</body>
</html>
//此為項目示例代碼；喊部分操作
// SVG 畫圖
////console.log("svg數據為：",svgData);
var user ={name: "用戶",imgUrl :'./img/icon/user.png'}, //用戶
bank ={ name: "銀行卡",imgUrl :'./img/icon/bank.png'}, //銀行卡
phone ={name: "設備",imgUrl :'./img/icon/phone.png'}, //設備
call = {name: "手機號",imgUrl :'./img/icon/call.png'}; //手機號
var nodes = [{name: "用戶",imgUrl :'./img/icon/user.png'}];
// source 所屬 指向 下標； target ：目標
/**
* @ edges = [{
* source: {name: "用戶", imgUrl: "./img/icon/user.png", index: 0, weight: 5, x: 241.9645110438536, …}
* target: {name: "用戶", imgUrl: "./img/icon/user.png", index: 0, weight: 5, x: 241.9645110438536, …}
* }]
*
*/
// var userEdges = {source : 0, target:0},
// bankEdges = {source : 0, target:0},
// phoneEdges = {source : 0, target:0},
// callEdges = {source : 0, target:0},
var edges = [{ source : 0, target:0}];
// 循環 devices_list 獲取手機設備數量
var i = 0;
newData.map(function(item,index){
//console.log(item)
nodes.push({name: item.device_name,imgUrl :'./img/icon/phone.png'});
edges.push({ source : 0, target:index+1},)
})
nodes.push({name: "手機號",imgUrl :'./img/icon/call.png'});
edges.push({ source : 0, target:edges.length},)
var width = document.body.clientWidth;
var height = 421;
var img_w = 25;
var img_h = 25;
var radius = 20; //圓形半徑
var svg = d3.select(".force")
.append("svg")
.attr("width",width)
.attr("height",height);
var force = d3.layout.force()
.nodes(nodes) //指定節點數組
.links(edges) //指定連線數組
.size([width,height]) //指定范圍
.linkDistance(50) //指定連線長度
.charge(-400); //相互之間的作用力
force.start(); //開始作用
//console.log(nodes);
//console.log(edges);
//添加連線
var svg_edges = svg.selectAll("line")
.data(edges)
.enter()
.append("line")
.style("stroke","#ccc")
.style("stroke-width",1);
var color = d3.scale.category20();
//添加節點
// var svg_nodes = svg.selectAll("circle")
// .data(nodes)
// .enter()
// .append("circle")
// .attr("r",20)
// .style("fill",function(d,i){
// return color(i);
// })
// .call(force.drag); //使得節點能夠拖動
// 添加描述節點的文字
var svg_texts = svg.selectAll("text")
.data(nodes)
.enter()
.append("text")
.style("fill", "#fff")
.style("font-size", "12px")
.style("fill-opacity", 0)
.attr("dx", 15)
.attr("dy", 40)
.text(function(d){
return d.name;
});
// edges.map(function(item,index){
// //console.log(item,index)
// })
//添加 圖片節點
var textShow = false;
var svg_imgs = svg.selectAll("image")
.data(nodes)
.enter()
.append("image")
.attr("dx", 200)
.attr("dy", -400)
.attr("r", radius)
.attr("width", img_w)
.attr("height", img_h)
.attr("xlink:href", function(edges){
return edges.imgUrl;
})
.on("mousedown",function(d,i){
//顯示連接線上的文字
textShow = !textShow
svg_texts.style("fill-opacity",function(edges,ii){
if(textShow){
return 1.0;
}else{
return 0.0;
}
});
})
.call(force.drag); //使得節點能夠拖動
force.on("tick", function(){ //對於每一個時間間隔
//更新連線坐標
svg_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; });
//更新節點坐標
// svg_nodes.attr("cx",function(d){ return d.x; })
// .attr("cy",function(d){ return d.y; });
// 更新圖片
// nodes_img.attr("cx",function(d){ return d.x });
// nodes_img.attr("cy",function(d){ return d.y });
// 更新文字坐標
svg_texts.attr("x", function(d){ return d.x-30.5; })
.attr("y", function(d){ return d.y-16; });
//更新頭像坐標
svg_imgs.attr("x", function(d){ return d.x-12.5; })
.attr("y", function(d){ return d.y-12; });
});
}