基于D3.js繪制二部圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bipartite</title>
</head>
<script src="../JavaScript/d3/4.x/d3.min.js"></script>
<body>
<svg width="5000" height="5000"></svg>
<script>
var nodes=[];
var links=[];
d3.json("qwe.json",function (error,data) {
if (error)
return console.error(error);
else
//console.log(data);
var numm=0;
for (var item in data["nodes"]){
//**********************選擇某個二部圖********************
if (data["nodes"][item].setIndex==2)
nodes.push(data["nodes"][item]);
numm=Math.max(numm,data["nodes"][item].setIndex);
}
//console.log(numm);
for (var item in data["links"]){
links.push(data["links"][item]);
}
for (var i=1;i<=numm;i++){
}
var svg=d3.select("body")
.select("svg");
var rect = svg.selectAll("rect")
.data(nodes)
.enter()
.append("rect")
.attr("fill","#C4D4F6")
.attr("x",function (data) {
if (data.location=="left")
return 300;
else
return 500;
})
.attr("y",function (data) {
return 50+data.pos*20;
})
.attr("width",100)
.attr("height",15)
.on("mouseover",function (data,i) {
var target=[];
//target.push[data.id];
d3.selectAll("line")
.attr("stroke",function (d) {
if (d.source==data.id)
target.push(d.target)
else if (d.target==data.id)
target.push(d.source)
if (d.source==data.id||d.target==data.id)
return "#FE8483";
else
return "#D9DDE0";
});
// console.log(target);
d3.selectAll("rect")
.attr("fill",function (data) {
for (var i in target){
// console.log(target[i]);
if (data.id==target[i])
return "#FAE7D6";
}
return "#C4D4F6";
});
d3.select(this)
.attr("fill","#F7CFAC");
})
.on("mouseout",function () {
d3.selectAll("rect")
.attr("fill","#C4D4F6");
d3.selectAll("line")
.attr("stroke","#D9DDE0");
});
var poly = svg.selectAll("polygon")
.data(nodes)
.enter()
.append("polygon")
.attr("points",function (data) {
var str="";
var x1,x2,x3,x4;
var y1,y2,y3,y4;
if (data.location=="left"){
x1=300;
x2=300;
x3=300+50*(data.neighbour.length/20);
x4=300+50*(data.neighbour.length/20);
}
else{
x1=500;
x2=500;
x3=500+50*(data.neighbour.length/20);
x4=500+50*(data.neighbour.length/20);
}
var tem1 = 50+data.pos*20;
y1 = tem1;
y2 = tem1+15;
y3 = tem1+15;
y4 = tem1;
x1=x1.toString();
x2=x2.toString();
x3=x3.toString();
x4=x4.toString();
y1=y1.toString();
y2=y2.toString();
y3=y3.toString();
y4=y4.toString();
str = x1+","+y1+" "+x2+","+y2+" "+x3+","+y3+" "+x4+","+y4;
// console.log(data.neighbour.length);
return str;
})
.attr("fill","#93b3ff")//"#93B3FF"
.on("mouseover",function (data,i) {
var target=[];
//target.push[data.id];
d3.selectAll("line")
.attr("stroke",function (d) {
if (d.source==data.id)
target.push(d.target)
else if (d.target==data.id)
target.push(d.source)
if (d.source==data.id||d.target==data.id)
return "#FE8483";
else
return "#D9DDE0";
});
console.log(target);
d3.selectAll("rect")
.attr("fill",function (d) {
for (var i in target){
// console.log(target[i]);
if (d.id==target[i])
return "#FAE7D6";
else if(d.id==data.id)
return "#F7CFAC";
}
return "#C4D4F6";
});
})
.on("mouseout",function () {
d3.selectAll("rect")
.attr("fill","#C4D4F6");
d3.selectAll("line")
.attr("stroke","#D9DDE0");
});
var text = svg.selectAll("text")
.data(nodes) //綁定資料
.enter() //擷取enter部分
.append("text") //添加text元素，使其與綁定數組的長度一緻
.attr("fill","black")
.attr("font-size","10px")
.attr("text-anchor","middle")
.attr("x", function(data){
if (data.location=="left") {
return 350;
}
else{
return 550;
}
})
.attr("y", function(data){
return 58+data.pos*20;
})
.attr("dx",0)
.attr("dy",3)
.text(function(data){
console.log(data.id)
return data.label;
})
.on("mouseover",function (data,i) {
var target=[];
//target.push[data.id];
d3.selectAll("line")
.attr("stroke",function (d) {
if (d.source==data.id)
target.push(d.target)
else if (d.target==data.id)
target.push(d.source)
if (d.source==data.id||d.target==data.id)
return "#FE8483";
else
return "#D9DDE0";
});
console.log(target);
d3.selectAll("rect")
.attr("fill",function (d) {
for (var i in target){
// console.log(target[i]);
if (d.id==target[i])
return "#FAE7D6";
else if(d.id==data.id)
return "#F7CFAC";
}
return "#C4D4F6";
});
})
.on("mouseout",function () {
d3.selectAll("rect")
.attr("fill","#C4D4F6");
d3.selectAll("line")
.attr("stroke","#D9DDE0");
});
console.log(links);
var lines = svg.selectAll("line")
.data(links)
.enter()
.append("line")
.attr("stroke","#D9DDE0")
.attr("strole-width",10)
.attr("x1",function (data) {
for (var item in nodes){
if (data.source==nodes[item].id){
if (nodes[item].location=="left"){
//console.log("left");
return 400;
}
else{
//console.log("right");
return 500;
}
}
}
})
.attr("y1",function (data) {
for (var item in nodes){
if (data.source==nodes[item].id){
return 58+nodes[item].pos*20;
}
}
})
.attr("x2",function (data) {
for (var item in nodes){
if (data.target==nodes[item].id){
if (nodes[item].location=="left"){
//console.log("left");
return 400;
}
else{
//console.log("right");
return 500;
}
}
continue;
}
})
.attr("y2",function (data) {
for (var item in nodes){
if (data.target==nodes[item].id){
return 58+nodes[item].pos*20;
}
}
});
})
</script>
</body>
</html>
效果:
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)