d3.js v3版力导向图如何动态增加数据？？？

qq_32905827 2017-04-01 10:09:03

现在在官方的力导向图的demo上想增加点功能，就是在页面上增加一个按钮，点击就可以在页面上增加一个独立的节点，要怎么做？

...全文

591 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

wuxudong2702 2018-12-03

打赏
举报

回复

更新你的数据就可以了，新数据要包含旧数据，不需要remove()，

前言最近公司业务服务老出bug，各路大佬盯着链路图找问题找的头昏眼花。某天大佬丢了一张图过来“我们做一个资源拓扑图吧，方便大家找bug”。就是这个图，应该是马爸爸家的好吧，来仔细瞧瞧这个需求咋整呢。一圈资源围着一个中心的一个应用，用曲线连接起来，曲线中段记有应用与资源间的调用信息。emmm 这个看起来很像女神在遛一群舔狗… 啊不，是 d3.js 力导向图！ d3.js 力导向图 d3.js 是著名的数据可视化基础工具，他提供了基本的将数据映射至网页元素的能力，同时封装了大量实用的数据操作函数与图形算法。其中力导向图（Force-Directed Graph）是 d3.js 提供的一种

前段时间将力导向图节点绑定上了菜单，实现了节点能够右击展开菜单功能这次更新实现动态更新节点数据。本次使用的D3 版本是V4

记录一点碰到的问题和解决方案。感觉国内关于D3.js 4.0版本的相关资料还是少。力导向图布局 D3一种布局的方式，可以将你nodes links的节点数据转换成可以绘制的坐标点数据，然后通过svg展现出来，画拓扑图中用到。通过fixed属性来固定节点 https://bl.ocks.org/mbostock/... 上面作者的demo(d3.js v4)。力导向图的几个特征

参考链接：https://www.cnblogs.com/xcxcxcxc/p/5900444.html页面：keyword.html页面代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> *{ margin...

今天遇到个问题就是把json(里面nodes和edges属性)文件通过D3.js展示出来，下午终于弄出来了，写篇博客记录一下。先展示一下效果图：放大后是这个效果：什么是力导向图D3.js官网：http://d3js.org/ D3.js github:https://github.com/d3/d3 力导向图（Force-Directed Graph），是绘图

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章