d3.js的力导向图,同一个节点,分成两个关系图

图片说明

当点击圈中 的数据后,就变成两个关系图
想知道怎么使两个数据合二为一组成一个关系图?

katy_1
katy_1 回复Hellen90912: 更改节点数据nodes和links
8 个月之前 回复
Hellen90912
眼里有鲸鱼哇 回复魔女de: ???
一年多之前 回复
weixin_44625717
魔女de 回复Hellen90912: o
一年多之前 回复
Hellen90912
眼里有鲸鱼哇 有没有非常了解D3.js的小伙伴啊
一年多之前 回复
Hellen90912
眼里有鲸鱼哇 有没有非常了解d3.js
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
D3.js 力导向图 用自己的图标

各位大佬们,怎么用D3.js做力导向图时用自己的图标啊?就是像把节点换成自己的图片T-T

d3.js力导向图中,点击其他节点,逻辑为什么就不对了

![图片说明](https://img-ask.csdn.net/upload/201901/25/1548412130_907960.jpg) ![图片说明](https://img-ask.csdn.net/upload/201901/25/1548412169_659772.png) 当点击0xc778时就变成图二,为什么原来61bb的子节点就会变成4534的子节点

d3.js怎么设置节点的背景图片??

![图片说明](https://img-ask.csdn.net/upload/201903/12/1552358537_750440.png) 用d3.js做了一个流程图,节点的背景颜色是fill:red;请问怎么设置背景图片?

d3.js流程图怎么控制节点之间的距离?

用d3.js写了一个流程图,感觉每个节点之间的距离太近,太紧,怎么才能修改两个节点的距离,使连接的线段变长?

d3.js的力导向图,想知道怎么组合成一个关系图

![图片说明](https://img-ask.csdn.net/upload/201901/24/1548301535_780729.png) 想知道怎么组合成一个关系图

D3.js中力导向图的force.alpha()到底是干什么用的?

我本来以为force.alpha(a)是用来冷却参数a的(使a随布局的稳定程度而衰减),但后来发现我赋给a一个值,但是并不会被冷却。 如果force.alpha(a)不是这么用的,那D3.js中还有什么方法可以最小化参数a(a>0)?

D3.js 力导向图,其中的path在 ie10 ,ie11中不显示

![图片说明](https://img-ask.csdn.net/upload/201707/27/1501147544_598506.png)![图片说明](https://img-ask.csdn.net/upload/201707/27/1501147446_377760.png) ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-30-ArrowForce.html</title> <script type="text/javascript" src="d3.v3.js"></script> <style type="text/css"> path.link { fill: none; stroke: #666; stroke-width: 1.5px; } marker#licensing { fill: green; } path.link.licensing { stroke: green; } path.link.resolved { stroke-dasharray: 0,2 1; } circle { fill: #ccc; stroke: #333; stroke-width: 1.5px; } text { font: 10px sans-serif; pointer-events: none; } text.shadow { stroke: #fff; stroke-width: 3px; stroke-opacity: .8; } } </style> </head> <body> <script type="text/javascript"> var links = [ {source: "Microsoft", target: "Amazon", type: "licensing"}, {source: "Microsoft", target: "HTC", type: "licensing"}, {source: "Samsung", target: "Apple", type: "suit"}, {source: "Motorola", target: "Apple", type: "suit"}, {source: "Nokia", target: "Apple", type: "resolved"}, {source: "HTC", target: "Apple", type: "suit"}, {source: "Kodak", target: "Apple", type: "suit"}, {source: "Microsoft", target: "Barnes & Noble", type: "suit"}, {source: "Microsoft", target: "Foxconn", type: "suit"}, {source: "Oracle", target: "Google", type: "suit"}, {source: "Apple", target: "HTC", type: "suit"}, {source: "Microsoft", target: "Inventec", type: "suit"}, {source: "Samsung", target: "Kodak", type: "resolved"}, {source: "LG", target: "Kodak", type: "resolved"}, {source: "RIM", target: "Kodak", type: "suit"}, {source: "Sony", target: "LG", type: "suit"}, {source: "Kodak", target: "LG", type: "resolved"}, {source: "Apple", target: "Nokia", type: "resolved"}, {source: "Qualcomm", target: "Nokia", type: "resolved"}, {source: "Apple", target: "Motorola", type: "suit"}, {source: "Microsoft", target: "Motorola", type: "suit"}, {source: "Motorola", target: "Microsoft", type: "suit"}, {source: "Huawei", target: "ZTE", type: "suit"}, {source: "Ericsson", target: "ZTE", type: "suit"}, {source: "Kodak", target: "Samsung", type: "resolved"}, {source: "Apple", target: "Samsung", type: "suit"}, {source: "Kodak", target: "RIM", type: "suit"}, {source: "Nokia", target: "Qualcomm", type: "suit"} ]; var nodes = {}; links.forEach(function(link) { link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); }); var w = 960, h = 500; var force = d3.layout.force() .nodes(d3.values(nodes)) .links(links) .size([w, h]) .linkDistance(60) .charge(-300) .on("tick", tick) .start(); var svg = d3.select("body").append("svg:svg") .attr("width", w) .attr("height", h); //(1)创建箭头 svg.append("svg:defs").selectAll("marker") .data(["suit", "licensing", "resolved"]) .enter().append("svg:marker") .attr("id", String) .attr("viewBox", "0 -5 10 10") .attr("refX", 15) .attr("refY", -1.5) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("svg:path") .attr("d", "M0,-5L10,0L0,5"); //(2)根据连线类型引用上面创建的标记 var path = svg.append("svg:g").selectAll("path") .data(force.links()) .enter().append("svg:path") .attr("class", function(d) { return "link " + d.type; }) .attr("marker-end", function(d) { return "url(#" + d.type + ")"; }); var circle = svg.append("svg:g").selectAll("circle") .data(force.nodes()) .enter().append("svg:circle") .attr("r", 6) .call(force.drag); var text = svg.append("svg:g").selectAll("g") .data(force.nodes()) .enter().append("svg:g"); // A copy of the text with a thick white stroke for legibility. text.append("svg:text") .attr("x", 8) .attr("y", ".31em") .attr("class", "shadow") .text(function(d) { return d.name; }); text.append("svg:text") .attr("x", 8) .attr("y", ".31em") .text(function(d) { return d.name; }); // 使用椭圆弧路径段双向编码。 function tick() { //(3)打点path格式是:Msource.x,source.yArr00,1target.x,target.y path.attr("d", function(d) { var dx = d.target.x - d.source.x,//增量 dy = d.target.y - d.source.y, dr = Math.sqrt(dx * dx + dy * dy); return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; }); circle.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); text.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); } </script> </body> </html> ```

有用过d3.js树状图的吗?如何默认打开后只显示父节点,点击后才能看到子节点呢?

现在的树形数据图是打开页面后 把所有的接口返回的数据都展示出来了.那么问题来了: 1.数据量太大显示所有数据等待时间过长 2.由于把所有的子节点都展示出来,页面显得太乱 ![这只是第二层的数据](https://img-ask.csdn.net/upload/201705/22/1495443115_619573.png)

D3.JS中树状图的连线样式

近期接触D3做与可视化相关的东西,, ,,根据json数据做了简单的横向树状图, ,不过代码是教程的,教程中的连线是什么贝塞尔线,不过 ,我想把连线变为直线,而且父子节点连线长度和角度能控制,怎么解决呢???? 附图和代码(还有简单的数据样式)如下: 1.图效果 ![图片说明](https://img-ask.csdn.net/upload/201705/19/1495206947_923605.png) 2.程序代码 ``` var tree = d3.layout.tree() .size([width1, height1-200]) .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); }); var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; }); var zoom = d3.behavior.zoom() .scaleExtent([1, 10]) .on("zoom", zoomed); var svg1= d3.select("#main1").append("svg") .attr("width", width1) .attr("height", height1); var group = svg1.append("g") .call(zoom); d3.json("tree.json", function(error, root1) { var nodes = tree.nodes(root1); var links = tree.links(nodes); console.log(nodes); console.log(links); var link = group.selectAll(".link") .data(links) .enter() .append("path") .attr("class", "link") .attr("d", diagonal); var node = group.selectAll(".node") .data(nodes) .enter() .append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) ``` 3.简单的数据 ``` { "name":"人民日报", "children": [ { "name":"新浪军事" , "children": [ {"name":"sdvsa" }, {"name":"树VC" }, {"name":"克看依"}, {"name":"克看依"} ] }, { "name":"云南共青团" , "children": [ ] }, { "name":"罗援", "children": [ ] }, { "name":"军武菌" , "children": [ {"name":"dfff"}, {"name":"fv依"} ] }, { "name":"莱卡棉", "children": [ ] }, ```

使用d3.js制作关系图 调用json文件后内容怎么不显示

使用d3.js制作关系图 调用json文件后内容怎么不显示 节点可以生成关系图但是json里面的name不显示

D3的力导向图怎么把某些特殊节点半径放大

部分代码如图所示 ``` var force = d3.layout.force() .nodes(root.nodes) .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","#660066") .style("stroke-width",1); var edges_text = svg.selectAll(".linetext") .data(root.edges) .enter() .append("text") .attr("class","linetext") .attr("dx",text_dx) .attr("dy",text_dy) .text(function(d){ return d.relation; }); // 圆形图片节点(人物头像) var nodes_img = svg.selectAll("image") .data(root.nodes) .enter() .append("circle") .attr("class", "circleImg") .attr("r", radius) .attr("fill", function(d, i){ //创建圆形图片 var defs = svg.append("defs").attr("id", "imgdefs"); var catpattern = defs.append("pattern") .attr("id", "catpattern" + i) .attr("height", 1) .attr("width", 1) catpattern.append("image") .attr("x", - (img_w / 2 - radius)) .attr("y", - (img_h / 2 - radius)) .attr("width", img_w) .attr("height", img_h) .attr("xlink:href", d.image) return "url(#catpattern" + i + ")"; }) ```

D3.js中的分组条形图

<div class="post-text" itemprop="text"> <p>Grouped Bar chart with json data</p> <pre><code>data={"data":" [ {\"indzone\":\"DO3Zone\",\"totalplot\":1506,\"allotted\":604,\"vacant\":625,\"amenities\":27 } , {\"indzone\":\"MysuruZone\",\"totalplot\":1382,\"allotted\":752,\"vacant\":325,\"amenities\":27}, {\"indzone\":\"BallariZone\",\"totalplot\":920,\"allotted\":701,\"vacant\":65,\"amenities\":34}, {\"indzone\":\"BelagaviZone\",\"totalplot\":2650,\"allotted\":2188,\"vacant\":262,\"amenities\":45}, ]"} </code></pre> <p>I want to group for each zone allotted and vacant and amenities.How to achieve this with d3.js</p> </div>

右键单击d3.js元素:如何防止出现浏览器上下文菜单

<div class="post-text" itemprop="text"> <p>I have some d3.js element plotted, eg:</p> <pre><code> // draw rectangle svg.selectAll(".rect").append("rect") .attr("y", 10) .attr("x", 10) .attr("height", 5) .attr("width", 5) .on("contextmenu", function (d, i) { // react on right-clicking }); </code></pre> <p>and it works fine but also opens browser's context menu. How I can prevent that from happening?</p> </div>

d3.js树图线上添加关系?

![图片说明](https://img-ask.csdn.net/upload/201704/26/1493187716_884948.png) 图片效果已经实现了,现在想在线图上添加关系,我知道力导向图可以,但是它不是树图这种可以定点的上下关系。

D3.js 下载的实例地图,编辑时报错,怎么解决?

![图片说明](https://img-ask.csdn.net/upload/202003/10/1583807102_819132.png)![图片说明](https://img-ask.csdn.net/upload/202003/10/1583807108_71465.png) # D3.js 下载的实例地图,编辑时报错 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3: Mercator projection applied to oceans</title> <script type="text/javascript" src="../d3/d3.v3.js"></script> <style type="text/css"> /* No style rules here yet */ </style> </head> <body> <script type="text/javascript"> //Width and height var w = 500; var h = 300; //Define map projection var projection = d3.geo.mercator() .translate([w/2, h/2]) .scale([500]); //Define path generator var path = d3.geo.path() .projection(projection); //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //Load in GeoJSON data d3.json("oceans.json", function(json) { //Bind data and create one path per GeoJSON feature svg.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path) .style("fill", "steelblue"); }); </script> </body> </html> ```

d3.js如何获取坐标轴实际ticks值(实际刻度个数)

我设置了ticks值为10 ```var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(10); ``` 但实际会根据数据的范围返回或多或少的刻度数量,并不是我设定的10,。我该如何获取实际的ticks值。

SVG力导向图中如何只显示与当前节点相关联的连线?

var circles=svg.selectAll("circle") .data(data).enter() .append("circle") .attr("id",function(d,i){return "circle"+i;}) .attr("r",8) .attr("fill","red") .call(force.drag); 还需要加什么? 那显示与当前节点相连的两层节点又要做什么改变?

为什么我的d3js绘制的折线图形是这样的???大神求助

![图片说明](https://img-ask.csdn.net/upload/201608/24/1472044031_41237.png) 代码如下,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .axis path, .axis line{ fill:none; stroke:black; shape-renderig:crispEdges; } .axis text{ font-family:Tahoma, Geneva, sans-serif; font-size:11px; } .MyRect{ fill:stealblue; } .MyText{ fill:white; text-anchor:middle;} </style> </head> <body> <script src="../d3/d3.min.js" charset="utf-8"></script> <script> var body=d3.select("body"); var width=400; var height=400; var svg=body.append("svg") .attr("width",400) .attr("height",400); //1.读取文件 //(1)d3.text() //(2)d3.json() /*d3.text("example.txt",function(error,txtdata){ if(error) console.log(error); console.log(txtdata); });*/ d3.json("example.json",function(error,jsondata){ if(error) console.log(error); console.log(jsondata); var xmax=d3.max(jsondata.data, function(d){return d.x;}); var ymax=d3.max(jsondata.data, function(d){return d.y;}); var xScale=d3.scale.linear() .domain([0,xmax]) .range([0,300]); var yScale=d3.scale.linear() .domain([0,ymax]) .range([250,0]); //添加坐标轴 var xAxis=d3.svg.axis() .scale(xScale) .orient("bottom"); var gxAxis=svg.append("g") .attr("class","axis") .attr("transform","translate(30,350)") .call(xAxis); var yAxis=d3.svg.axis() .scale(yScale) .orient("left"); var gyAxis=svg.append("g") .attr("class","axis") .attr("transform","translate(30,100)") .call(yAxis); //2.线段生成器 var line=d3.svg.line() .x(function(d){return xScale(d.x);}) .y(function(d){return yScale(d.y);}) .interpolate("basis"); //3.折线图 svg.append("path") .attr("class","MyPath") .attr("d",line(jsondata.data)) .attr("transform","translate(30,100)"); });//根据坐标系进行平移 </script> </body> </html>

树状图的各层节点数目的获取,进而形成一个柱状图

前期,利用D3.JS和JSON数据格式,,做了一个简单的树状图, 为了更好的描述这个图呢, 我想获取树的每一层节点数目,然后放到数组中进而画一个柱状图,怎么办呢 不知道代码怎么写,,主要是怎么获取数的json节点数目并放到数组中,, 简单的JSON数据如下: ``` "name":"人民日报", "children": [ { "name":"新浪军事" , "children": [ {"name":"sdvsa" }, {"name":"树VC" }, {"name":"克看依"}, {"name":"克看依"} ] }, { "name":"云南共青团" , "children": [ ] }, { "name":"罗援", "children": [ ] }, { "name":"军武菌" , "children": [ {"name":"dfff"}, {"name":"fv依"} ] }, { "name":"莱卡棉", "children": [ ] }, { "name":"omsdf", "children": [ {"name":"克看依"} ] }, { "name":"时刻能", "children": [ ] }, { "name":"卡棉", "children": [ ] }, { "name":"莱棉", "children": [ {"name":"来看齐"}, {"name":"克jbn"}, {"name":"sfdg"} ] ```

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

150讲轻松搞定Python网络爬虫

150讲轻松搞定Python网络爬虫

实用主义学Python(小白也容易上手的Python实用案例)

实用主义学Python(小白也容易上手的Python实用案例)

我说我不会算法,阿里把我挂了。

不说了,字节跳动也反手把我挂了。

立方体线框模型透视投影 (计算机图形学实验)

计算机图形学实验 立方体线框模型透视投影 的可执行文件,亲测可运行,若需报告可以联系我,期待和各位交流

2019 AI开发者大会

2019 AI开发者大会

组成原理课程设计(实现机器数的真值还原等功能)

实现机器数的真值还原(定点小数)、定点小数的单符号位补码加减运算、定点小数的补码乘法运算和浮点数的加减运算。

C/C++跨平台研发从基础到高阶实战系列套餐

一 专题从基础的C语言核心到c++ 和stl完成基础强化; 二 再到数据结构,设计模式完成专业计算机技能强化; 三 通过跨平台网络编程,linux编程,qt界面编程,mfc编程,windows编程,c++与lua联合编程来完成应用强化 四 最后通过基于ffmpeg的音视频播放器,直播推流,屏幕录像,

MFC一站式终极全套课程包

该套餐共包含从C小白到C++到MFC的全部课程,整套学下来绝对成为一名C++大牛!!!

软件测试2小时入门

软件测试2小时入门

三个项目玩转深度学习(附1G源码)

三个项目玩转深度学习(附1G源码)

计算机图形学-球的光照模型课程设计

计算机图形学-球的光照模型,有代码完美运行,有课程设计书

Linux常用命令大全(非常全!!!)

Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错。我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因,比较短小但却功能强大。我将我了解到的命令列举一下,仅供大家参考: 系统信息 arch 显示机器的处理器架构 uname -m 显示机器的处理器架构 uname -r 显示正在使用的内核版本 d...

因为看了这些书,我大二就拿了华为Offer

四年了,四年,你知道大学这四年我怎么过的么?

深度学习原理+项目实战+算法详解+主流框架(套餐)

深度学习系列课程从深度学习基础知识点开始讲解一步步进入神经网络的世界再到卷积和递归神经网络,详解各大经典网络架构。实战部分选择当下最火爆深度学习框架PyTorch与Tensorflow/Keras,全程实战演示框架核心使用与建模方法。项目实战部分选择计算机视觉与自然语言处理领域经典项目,从零开始详解算法原理,debug模式逐行代码解读。适合准备就业和转行的同学们加入学习! 建议按照下列课程顺序来进行学习 (1)掌握深度学习必备经典网络架构 (2)深度框架实战方法 (3)计算机视觉与自然语言处理项目实战。(按照课程排列顺序即可)

fakeLocation13.5.1.zip

fakeLocation13.5.1 虚拟定位 ios13.5.1的最新驱动下载,iPhone/iPad免越狱虚拟定位工具Location-cleaned驱动已更新

UnityLicence

UnityLicence

Python可以这样学(第一季:Python内功修炼)

Python可以这样学(第一季:Python内功修炼)

Python+OpenCV计算机视觉

Python+OpenCV计算机视觉

土豆浏览器

土豆浏览器可以用来看各种搞笑、电影、电视剧视频

【数据结构与算法综合实验】欢乐连连看(C++ & MFC)案例

这是武汉理工大学计算机学院数据结构与算法综合实验课程的第三次项目:欢乐连连看(C++ & MFC)迭代开发代码。运行环境:VS2017。已经实现功能:开始游戏、消子、判断胜负、提示、重排、计时、帮助。

php+mysql学生成绩管理系统

学生成绩管理系统,分三个模块:学生,教师和管理员。 管理员模块:负责学生、老师信息的增删改;发布课程信息的增删改,以便让学生选课;审核老师提交的学生成绩并且打印成绩存档;按照课号查询每个课号的学生成绩

多功能数字钟.zip

利用数字电子计数知识设计并制作的数字电子钟(含multisim仿真),该数字钟具有显示星期、24小时制时间、闹铃、整点报时、时间校准功能

推荐24个国外黄色网站欣赏

在中国清朝,明黄色的衣服只有皇子才有资格穿,慢慢的黄色在中国就成了高贵的颜色。在人们的色彩印象中,黄色也表现为暂停。所以当你的网页设计采用黄色的时候,会让人们在你的网页前停留。 黄色,就像橙色和红色,黄色也是一个暖色。它有大自然、阳光、春天的涵义,而且通常被认为是一个快乐和有希望的色彩。黄色是所有色相中最能发光的颜色,给人轻快,透明,辉煌,充满希望的色彩印象。 黄色是一个高可见的色...

u-boot-2015.07.tar.bz2

uboot-2015-07最新代码,喜欢的朋友请拿去

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

学生成绩管理系统(PHP + MYSQL)

做的是数据库课程设计,使用的php + MySQL,本来是黄金搭配也就没啥说的,推荐使用wamp服务器,里面有详细的使用说明,带有界面的啊!呵呵 不行的话,可以给我留言!

Windows版YOLOv4目标检测实战:训练自己的数据集

Windows版YOLOv4目标检测实战:训练自己的数据集

C++语言基础视频教程

C++语言基础视频教程

玩转Python-Python3基础入门

玩转Python-Python3基础入门

相关热词 c#跨线程停止timer c#批量写入sql数据库 c# 自动安装浏览器 c#语言基础考试题 c# 偏移量打印是什么 c# 绘制曲线图 c#框体中的退出函数 c# 按钮透明背景 c# idl 混编出错 c#在位置0处没有任何行
立即提问