d3js实现力学图+人物关系图



描述人物关系的数据结构

{
"nodes":[
{ "name": "云天河"   , "image" : "tianhe.png" },
{ "name": "韩菱纱"   , "image" : "lingsha.png" },
{ "name": "柳梦璃"   , "image" : "mengli.png" },
{ "name": "慕容紫英" , "image" : "ziying.png" },
{ "name": "云天青" , "image" : "tianqing.png" },
{ "name": "夙玉" , "image" : "suyu.png" },
{ "name": "玄霄" , "image" : "xuanxiao.png" },
{ "name": "夙瑶" , "image" : "suyao.png" },
{ "name": "太清" , "image" : "taiqing.png" },
{ "name": "宗炼" , "image" : "zonglian.png" },
{ "name": "婵幽" , "image" : "chanyou.png" },
{ "name": "奚仲" , "image" : "xizhong.png" },
{ "name": "归邪" , "image" : "guixie.png" }
],
"edges":[
{ "source": 0 , "target": 1 , "relation":"挚友" },
{ "s
  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
d3.js是一个基于数据操作文档的JavaScript库,可以帮助开发者使用HTML、SVG和CSS来展示数据。d3.js可以用来实现人物关系谱,具体实现步骤如下: ```javascript // 引入d3.js库 <script src="https://d3js.org/d3.v3.min.js"></script> // 创建svg元素 var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); // 创建力导向 var force = d3.layout.force() .nodes(nodes) // 节点数组 .links(links) // 连线数组 .size([width, height]) // 画布大小 .linkDistance(150) // 连线长度 .charge(-400); // 节点间的斥力 // 绘制连线 var links = svg.selectAll(".link") .data(links) .enter() .append("line") .attr("class", "link"); // 绘制节点 var nodes = svg.selectAll(".node") .data(nodes) .enter() .append("circle") .attr("class", "node") .attr("r", 20) .style("fill", function(d) { return color(d.group); }) .call(force.drag); // 节点可拖拽 // 绘制节点标签 var labels = svg.selectAll(".label") .data(nodes) .enter() .append("text") .attr("class", "label") .attr("fill", "black") .attr("font-size", "12px") .attr("dx", 20) .attr("dy", 8) .text(function(d) { return d.name; }); // 开始力导向布局 force.start(); // 监听力导向布局事件 force.on("tick", function() { // 更新连线位置 links.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; }); // 更新节点位置 nodes.attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); // 更新节点标签位置 labels.attr("x", function(d) { return d.x; }) .attr("y", function(d) { return d.y; }); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值