d3.js 绘制脑图

2024-09-05

D3.js画思维导图（转）

思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有“树形”.因此,可以凭借这两种布局来制作思维导图. 1. 构造思路树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下.有一个root对象: { name: "node1", children: [ { name: "node

利用d3.js绘制雷达图

利用d3,js将数据可视化,能够做到数据与代码的分离.方便以后改动数据. 这次利用d3.js绘制了一个五维的雷达图.即将多个对象的五种属性在一张图上对照. 数据写入data.csv.数据类型写入type.csv文件. 效果例如以下图所看到的源代码连接:http://download.csdn.net/detail/svap1/7358123 使用是仅仅需调用 radar()函数就可以.例如以下是測试页面代码. <!DOCTYPE html> <html> <head>

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

上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后添加的Group2及Group2内的其他元素会遮盖先添加的Group1及Group1中的其他元素. 举个栗子别人都在过520,我在这里玩栗子 =.=: 向SVG中添加了一个Group1,又添加了一个Group2: 先向Group2中添加一个节点Group2_Node,在向Group1中添加一个节点

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

D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部分太少.和 EChart.Chart.js 等相比,D3.js** 的相对来说自由度会高很多,得益于 D3.js **中的 SVG 画图对事件处理器的支持,D3.js 可将任意数据绑定到文档对象模型(DOM)上,也可以直接操作对象模型(DOM)完成 W3C DOM API 相关操作,对于想要展示自己

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

大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://d3js.org/d3.v4.min.js&qu

[js]d3.js绘制拓扑树

echart也支持拓扑树了所需的json数据格式: children嵌套 vis.js也支持绘制拓扑树数据格式: nodes: {id, label, title} edges: {from, to, label} d3.js也可以绘制拓扑树]() D3 属于基础的绘图库(基于 canvas 的, 所以可以说完全不做兼容考虑),封装的功能都是一些基础图形图像和动画这类的,但是功能异常强大. Echarts 属于应用型 (或者业务型)的图表库, 期望的是: 几乎不需要写绘图过程代码就能生成漂亮

记录d3.js 力导向图的平移缩放，类似地图导航点击某一项移动到当前位置

项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间搜索出来的结果列表展示用的element-ui表格,前台进行分页,不依赖后台,下面记录一下svg的平移 function translateSvg(d){ //获取svg的父元素 const parentBox = svg.node().parentElement //获取父元素的宽度 const fullWidth = p

利用d3.js绘制中国地图

d3.js是一个比較强的数据可视化js工具. 利用它画了一幅中国地图,例如以下图所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3ZhcDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=""> 源代码例如以下: <!DOCTYPE html> <html> <head&

d3.js制作蜂巢图表带动画效果

以上是效果图,本图表使用d3.js v4制作.图表主要功能是在六边形格子中显示数据,点击底部图标可以切换指定格子高亮显示,图表可以随浏览器任意缩放. 1.图表的主体结构是由正六边形组成,使用d3生成六边形可以使用d3-hexbin.js,生成六边形比较方便,只要给定中心点坐标和半径即可生成六边形路径,例如: var r = 10; // 六边形半径 var pos = [[5,5],[10,10]]; // 六边形中心点坐标数组 var hexbin = d3.hexbin() // 使用hex

d3.js 绘制北京市地铁线路状况图(部分)

地铁线路图的可视化一直都是路网公司的重点,今天来和大家一起绘制线路图.先上图. 点击线路按钮,显示相应的线路.点击线路图下面的站间按钮(图上未显示),上报站间故障. 首先就是制作json文件,这个文件包括两部分,一部分是站点信息,另一部分就是线路信息,由于时间问题,我只写了5条线路(10号线站点太tm多了): 然后就是构造类文件,不多说: 之后就是主要的操作线路图的逻辑,还画了一个天安门. 好了废话不多说,下面上代码 1.主要代码 <!DOCTYPE html> <html lang=&

D3.js 饼状图的制作

1.数据有如下数据,需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些值都不存在于数组 dataset 中.因此,需要用到布局,布局的作用就是:计算出适合于作图的数据.这个过程称为数据转换 2.布局(数据转换) 定义一个布局,返回值赋给变量 pie,此时 pie 可以当做函数使用. var pie = d3.layout.pie(); 将数组 datase

D3.js 力导向图（气泡+线条+箭头+文字）

<!DOCTYPE html> <meta charset="utf-8"> <style> .link { fill: none; stroke: #666; stroke-width: 1.5px; } #licensing { fill: green; } .link.licensing { stroke: green; } .link.resolved { stroke-dasharray: 0,2 1; } circle { fill: #

D3.js 力导向图

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

D3.js 力导向图的制作

力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. 各连线的长度几乎相等,且尽可能不相交.节点和连线都被施加了力的作用,力是根据节点和连线的相对位置计算的. 根据力的作用,来计算节点和连线的运动轨迹,并不断降低它们的能量,最终达到一种能量很低的安定状态. 力导向图能表示节点之间的多对多的关系. 1. 数据初始数据如下: var nodes = [

d3.js 绘制极坐标图(polar plot)

0.引言在极坐标系中,任意位置可由一个夹角和一段相对原点(极点)的距离表示.也就是说,我们可以用 (angle,r) 来表示极坐标系中的点. 1.数据假设我们有如下数据集[ [10, 0.2], [6, 0.5], [23, 0.9],... ].其中每个数据的一维表示时间(24小时制),二维表示信号强度.如[10, 0.2]表示十点的信号强度为0.2.现在,我们要将这些数据呈现在极坐标图(polar plot)上: 2.比例尺我们发现,源数据的一维并不直接表示角度,二维也并不直接表示距离

D3.js绘制平行坐标图

参照:https://syntagmatic.github.io/parallel-coordinates/ 和 https://github.com/syntagmatic/parallel-coordinates 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原始数据平行坐标图</title>

d3.js画折线图

下载d3.zip,并解压到网页文件所在的文件夹 windows下,在命令行进入网页文件夹,输入 python -m http.server 在浏览器中输入127.0.0.1:8000/xxx.html 示例如下,html文件和data存在同一个目录下 https://bl.ocks.org/mbostock/3884955 <!DOCTYPE html> <meta charset="utf-8"> <style> path { stroke-wid

D3.js 力导向图（小气泡围绕中心气泡）

html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>气泡图1</title> <meta name="Generator" content="EditPlus"

D3.js 力导向图的拖拽（drag）与缩放（zoom）

不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终于解决了这个问题. 以下是事情发生的原因及解决的代码: var zoom = d3.behavior.zoom() .scaleExtent([, ]) //缩放范围 .on("zoom", zoomed); function zoomed() { container.attr("

canvas+js绘制折线图

效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>坐标系绘制</title> </head> <body> <canvas id="canvas"></canvas> <script> (function ()

D3.js绘制颜色:RGB、HSL和插值 (V3版本)

颜色和插值计算机中的颜色,常用的标准有RGB和HSL. RGB:色彩模式是通过对红(Red).绿(Green).蓝(Blue)三个颜色通道相互叠加来得到额各式各样的颜色.三个通道的值得范围都是0~255,因此总共能表示16777216(255*255*255)种,即一千六百多万种颜色.几乎包括了人类所能识别的所有颜色,是应用最广泛的色彩模式. HSL:色彩模式是通过色相(Hue).饱和度(Saturation).明度(Lightness)三个通道的相互叠加来得到各种颜色的.其中,色相的

d3.js 绘制脑图

热门专题