- 科技
- 基于D3.js绘制二部图
基于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
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
);
}
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
=[];
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";
});
d3
.selectAll("rect")
.attr("fill",function (data
) {
for (var i
in target
){
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
;
return str
;
})
.attr("fill","#93b3ff")
.on("mouseover",function (data
,i
) {
var target
=[];
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
){
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()
.append("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
=[];
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
){
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"){
return 400;
}
else{
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"){
return 400;
}
else{
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
>
效果:
Processed:
0.012, SQL:
8
