relation.json：
{"nodes":[{ "name": "云天河" , "image" : "SilenceImage/tianhe.jpg" },{ "name": "韩菱纱" , "image" : "SilenceImage/lingsha.jpg" },{ "name": "柳梦璃" , "image" : "SilenceImage/mengli.jpg" },{ "name": "慕容紫英" , "image" : "SilenceImage/ziying.jpg" }],"edges":[{ "source": 0 , "target": 1 , "relation":"挚友" },{ "source": 0 , "target": 2 , "relation":"挚友" },{ "source": 0 , "target": 3 , "relation":"挚友" }]
}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>力学图加人物关系图</title>
</head>
<style>.nodetext {font-size: 12px ;font-family: SimSun;fill: #ff3451;}.linetext {font-size: 12px ;font-family: SimSun;fill: #64ffae;fill-opacity:1.0;}
</style>
<body>
<script src="d3.js"></script>
<script src="js/relation.js"></script>
</body>
</html>var width = 600,height = 600;
var img_w = 77,img_h = 90;
var svg = d3.select("body").append("svg").attr("width",width).attr("height",height)d3.json("relation.json",function(error,root){if (error) {return console.log(error)}console.log(root);//定义力学图的布局var force = d3.layout.force().des).links(root.edges).size([width,height]).linkDistance(200).charge(-1500).start();//绘制连接线var edges_line = svg.selectAll("line").data(root.edges).enter().append("line").style("stroke","#ccc").style("stroke_width",1)var edges_text = svg.selectAll(".linetext").data(root.edges).enter().append("text").attr("class","linetext").text(function(d){lation;})//绘制结点var node_img = svg.selectAll("image").des).enter().append("image").attr("width",img_w).attr("height",img_h).attr("xlink:href",function(d){return d.image}).on("dblclick",function(d,i){d.fixed = false;}).call(force.drag)var node_dx = -20,node_dy = 20;var node_text = svg.selectAll(".nodetext").des).enter().append("text").attr("class","nodetext").attr("dx",node_dx).attr("dy",node_dy).text(function(d){return d.name})//运动刷新("tick",function(){//限制结点的边界des.forEach(function (d,i) {d.x = d.x-img_w/2<0?img_w: d.x;d.x = d.x+img_w/2>width?width-img_w/2: d.x;d.y = d.y - img_h/2<0?img_h/2: d.y;d.y = d.y +img_h/2>height?height-img_h/2: d.y;})//刷新连接线的位置edges_line.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;})//刷新连接线上的文字位置edges_text.attr("x",function(d){return (d.source.x+ d.target.x)/2;}).attr("y",function(d){return (d.source.y + d.target.y)/2;});//刷新结点图片位置node_img.attr("x",function(d){return d.x-img_w/2;}).attr("y",function(d){return d.y-img_h/2})//刷新结点图片位置node_text.attr("x",function(d){return d.x}).attr("y",function(d){return d.y+img_w/2})})
//拖拽开始后设定被拖拽对象为固定var drag = force.drag().on("dragstart", function (d) {d.fixed = true;})
})
本文发布于:2024-01-31 00:09:07，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170663095023822.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
