H5 --力导向图、关系图谱

//copy劝言：多研究没有坏处，随copy可直接使用，但建议研究一下；

操作节点，添加自己想要的效果；

例如：不要颜色原点，更换图片；

点击效果：隐藏显示，是否显示连线，连线颜色是否统一；

</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; });
});

}

H5 --力导向图、关系图谱

猜你喜欢