json.links.forEach(function (e) {
var sourceNode = json.nodes.filter(function (n) {
return n.name === e.source;
})[0],
targetNode = json.nodes.filter(function (n) {
return n.name === e.target;
})[0];
e.source = sourceNode
e.target = targetNode
});

https://stackoverflow.com/questions/23986466/d3-force-layout-linking-nodes-by-name-instead-of-index  

D3.js force力导向图用指定的字段确定link的source和target,默认是索引的更多相关文章

  1. Vue和d3.js(v4)力导向图force结合使用,v3版本升级v4【一】

    前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章 ...

  2. D3.js:力导向图

    var nodes = [ { name: "桂林" }, { name: "广州" }, { name: "厦门" }, { name: ...

  3. ECharts之force力导向布局图——数据源说明及后端API约定

    Echarts ? 关于 Echarts 请移步这里 force 力导向图 实现方式,如: function require_EC () { require( [ 'echarts', //载入for ...

  4. D3.js 力导向图的制作

    力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...

  5. D3.js系列——布局:饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

  6. D3.js力导向图中新增节点及新增关系连线示例

    大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...

  7. D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决

    上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...

  8. D3.js 力导向图

    花了大半天看了一个八十几行的代码..心累 力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...

  9. D3.js 力导向图的显示优化

    D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...

随机推荐

  1. scrapy和scrapy_redis入门

    Scarp框架 需求 获取网页的url 下载网页内容(Downloader下载器) 定位元素位置, 获取特定的信息(Spiders 蜘蛛) 存储信息(ItemPipeline, 一条一条从管里走) 队 ...

  2. PKUSC2018游记

    由于菜鸡DreamlessDreams还需要准备中考的原因....这篇游记拖到今天才发. Day0:出发+报道                                              ...

  3. 闭包可以存储变量(下标) 小demo

    点击每一行弹出其下标

  4. 前端html1.

    HTML介绍 转载http://www.cnblogs.com/liwenzhou/p/7988087.html Web服务本质 import socket sk = socket.socket() ...

  5. Setup Collision and Overlap Event

    添加头文件 #include "Components/StaticMeshComponent.h" 禁用网格体组件的碰撞效果 MeshComp->SetCollisionEn ...

  6. 微信小程序滚动Tab选项卡:左右可滑动切换

    最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当 ...

  7. 20165337实验三——敏捷开发与XP实践

    实验要求 实验三-1 敏捷开发与XP实践 http://www.cnblogs.com/rocedu/p/4795776.html, Eclipse的内容替换成IDEA 参考 http://www.c ...

  8. [转] 多核CPU 查看进程分配的CPU具体核id

    转自:https://linux.cn/article-6307-1.html ps. 方法二简明直接 done! 当你在 多核 NUMA 处理器上运行需要较高性能的 HPC(高性能计算)程序或非常消 ...

  9. UVA1660 电视网络 Cable TV Network

    题目地址:UVA1660 电视网络 Cable TV Network 枚举两个不直接连通的点 \(S\) 和 \(T\) ,求在剩余的 \(n-2\) 个节点中最少去掉多少个可以使 \(S\) 和 \ ...

  10. CF1105E Helping Hiasat

    题目地址:CF1105E Helping Hiasat 首先将问题转化成图论:对每个人建立一个点,将同一次修改后的所有人代表的点两两连一条边,那么最终所求的就是这个图的最大独立集 我们知道最大独立集是 ...