【d3.js制作连线动画图和编辑器】的更多相关文章

d3.js制作连线动画图和编辑器

此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/11431679.html 连线动画图 编辑器 效果如上图所示.本项目使用主要d3.jsv4制作,分两部分,一个是实际展示的连线动画图,另一个是管理人员使用鼠标编辑连线的页面.对于d3.js如何引入图片,如何画线等基础功能,这里就不再介绍了,大家可以找一些入门文章看一下.这里主要介绍一下重点问题. 1.连线动画图 此图的主要功能是每隔给定时间,通过ajax请求后台数据,并根据返回的数据动态改变每个…

D3.js 制作中国地图 .net 公共基础类

D3.js 制作中国地图 from:  http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding a variety of geographic data structures. http://geojson.org/ https://msdn.microsoft.com/en-us/library/mt712806.aspx GeoJSON 是用于描述地理空间信息的数据格式.GeoJSON…

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 教程 模仿echarts折线图

今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 class Line { constructor() { this._width = 1100; this._height = 800; this._padding = 10; this._offset = 35; this._margins = {right: 50,bottom: 50,left:…

d3.js制作条形时间范围选择器

此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/12146688.html 效果如上图所示. 本项目使用主要d3.js v4制作,可以用来选择两年的时间范围,两端按钮切换年,在时间轴上标注可以选择的时间范围和关键时间点.时间数据可以在前端配置,也可以从后端请求. 此程序相对比较简单,主要涉及d3的比例尺和拖动处理. 1)d3的比例尺其实就是把一个范围的数据映射到另一个范围的数据上 此处,我们使用线性比例尺:d3.scaleLinear() 它可…

【D3.js】Focus + Context 折线图

利用D3.js库实现Focus+Context的折线图.读取data.tsv文件数据 index.html <!DOCTYPE html> <meta charset="utf-8"> <style> svg { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .line { fill:…

d3.js 制作简单的俄罗斯方块

d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏--俄罗斯方块.话不多说先上图片. 1. js tetris类 由于方法拆分的比较细所以加上了一些备注(这不是我的风格!) const graphMap = [ { name: '倒梯形', position: [[0,4],[1,3],[1,4],[1,5]], rotate: [[[0,0],[-2,0],[-1,-1],[0,-2]],[[1,0],[1,2],[0,…

d3.js 制作简单的贪吃蛇

d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏–贪吃蛇.话不多说先上图片. 1. js snaker类 class Snaker { constructor() { this._size = 30; this._len = 3; this._width = 900; this._height = 690; this._rows = 23; this._cols = 30; this._colors = d3.scale…

D3.js系列——布局：打包图和地图

一.打包图 打包图( Pack ),用于表示包含与被包含的关系,也可表示各对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 1.布局(数据转换) var pack = d3.layout.pack() .size([ width, height ]) .radius(); 第 1 行:打包图的布局 第 2 行:size() 设定转换的范围,即转换后顶点的坐标(x,y),都会在此范围内. 第 3 行:radius() 设定转换后最小的圆的半径. 读取数据并转换的代码 d3.json(…

D3.js系列——布局：弦图和集群图/树状图

一.弦图 1.弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系的图表.两点之间的连线,表示谁和谁具有联系. 2.数据 初始数据为: var city_name = [ "北京" , "上海" , "广州" , "深圳" , "香港" ]; var population = [ [ , , , , ], [ , , , , ], [ , , , , ], [ , , , , ], [ , , ,…

java+数据库+D3.js 实时查询人物关系图

先看下 效果 某个用户,邀请了自己的朋友 ,自己的朋友邀请了其他朋友,1 展示邀请关系,2 点击头像显示邀请人和被邀请人的关系.(网上这种资料很少, 另外很多都是从JSON文件取 数据, 这里是从数据库取数据) =================================================================================================需求:Java从数据库查用户表,管理平台可以实时查看每个月用户的邀请关系图. 以下是代码: 1…

D3.js 制作中国地图

from:  http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding a variety of geographic data structures. http://geojson.org/ https://msdn.microsoft.com/en-us/library/mt712806.aspx GeoJSON 是用于描述地理空间信息的数据格式.GeoJSON 不是一种新的格式,其语法规…

d3.js 根据需求定制pie图饼图

参考网址: http://d3pie.org/#generator 用法: 1.在网址中,跟着步骤,设置样式和效果,最后获取pie的option格式 2.引入d3.min.js和d3pie.min.js环境,下载地址:http://d3pie.org/#download 3.在js代码中,对option进行new初始化就 var pie = new d3pie("pieChart",option); -------------------------------------------…

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…

d3.js 入门指南 - 仪表盘

D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. d3.js可以定制出各种图形,今天来用d3.js制作一个简易的仪表盘,废话不多说先上demo,接下来分步讲解. 1.绘制svg,并分组(group) const height = 600; //画布高度 const width = 1200; //画布宽度 const outerRadius = 2…

【 D3.js 高级系列 — 10.0 】 思维导图

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

【 D3.js 高级系列 — 2.0 】 捆图

捆图(Bundle)是 D3 中比较奇特的一个布局,只有两个函数,而且需要与其它布局配合使用.本文讲述捆图的制作方法. 有关捆图的例子极少,很容易找到的是:http://bl.ocks.org/mbostock/1044242 但是此例有些复杂,不太容易弄懂,而且也没有相应的说明文字(D3官网上的例大多没有相应文字解说),根本无法作为参考.本文提供一个简单的例子,讲解捆图到底是什么,应该怎么做. 捆图只有两个函数: d3.layout.bundle():创建一个捆图布局. bundle(link…

D3.js画思维导图（转）

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

【 D3.js 高级系列 — 3.0 】 堆栈图

堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑.智能手机.软件. 2005年,三种产品的利润分别为3000.2000.1100万. 2006年,三种产品的利润分别为1300.4000.1700万. 计算可得,2005年总利润为6100万,2006年为7000万. 如果要将2005年的利润用柱形表示,那么应该画三个矩形,三个矩形堆叠在一起.这时候就…

【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽

本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有趣的. 1.饼状图的绘制 与[入门 - 第 9.1 章]稍有有些不同,我们对饼状图的每一个区域都使用一个 g 标签将其包围起来,以便平移操作. var gAll = svg.append("g") .attr("transform","translate(&q…

d3.js 实现立体柱图

前言 随着大数据时代的来临,数据可视化的重要性也越来越凸显,那么今天就基于d3.js今天给大家带来可视化基础图表柱图进阶:立体柱图 关于d3.js d3.js是一个操作svg的图表库,d3封装了图表的各种算法.对d3不熟悉的朋友可以到d3.js官网学习d3.js.另外感谢司机大傻(声音像张学友一样性感的一流装逼手)和司机呆(呆萌女神)等人对d3.js进行翻译! HTML+CSS <!DOCTYPE html> <html lang="en"> <head&…

【 D3.js 进阶系列 — 2.2 】 力学图的參数

力学图的布局中有非常多參数.本文将逐个说明. D3 中的力学图布局是使用韦尔莱积分法计算的.这是一种用于求解牛顿运动方程的数值方法,被广泛应用于分子动力学模拟以及视频游戏中. 定义布局的代码例如以下: var force = d3.layout.force() 就可以.D3 中提供了 17 个函数用于设定其參数和事件.在全部布局中是最多的,以下将对其进行说明. size() 用于设定力学图的作用范围.用法为 force.size( [ x , y ] ),这个函数用于指定两件事: 重力的重心位置…

【 D3.js 高级系列 — 2.0 】 机械图 + 人物关系图

机械图(力路线图)结合老百姓的关系图中的生活,这是更有趣. 本文将以此为证据,所列的如何图插入外部的图像和文字的力学. 在[第 9.2 章]中制作了一个最简单的力学图.其后有非常多朋友有疑问,基本的问题包含: 怎样在小球旁插入文字 怎样将小球换为别的图形 怎样插入图片 怎样限制小球运动的边界 本文将对以上问题依次做出讲解.当中前三点是 SVG 元素的问题.和 D3 无多大关联. 1. SVG 图片 SVG 的图片元素的具体讲解可看[官方文档-图片].通常,我们仅仅须要使用到图片元素的五个属性就够…

用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: github 在线演示 : demo 效果 可以看到, 上图左上角为图例, 中间为各个手机公司之间的专利关系图. 图例中有三种线段: 红色实线: 正在进行专利诉讼 (箭头指向方为被诉讼方) 蓝色虚线: 诉讼已经结束 绿色实线: 专利已经授权 实现 下面让我们看看如何一步步实现上图的效果. 分析数据 […

D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)

现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有数据都是自己定义的假数据,大家参考一下制作方法即可. 首先定义柱形图的数据.绘图区域的宽高.和上下左右的边距: var width = 600; //SVG绘制区域的宽度 var height = 500; //SVG绘制区域的高度 //定义数据 var dataList = [50,43,120,…

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

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

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

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

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

【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定

本章讨论在力学图中经常使用到的事件( Event ),然后对[p=555">进阶 - 第 2.0 章]的人物关系图进行改进.使用户可以固定拖拽的对象. 在[入门 - 第 9.2 章]和[进阶 - 第 2.0 章]中,都用到了下面代码: force.on("tick", function(){ }); 这里的 force 是之前代码中定义的布局( Layout ).tick 表示当运动进行中每更新一帧时. 这是力学图中最常使用的事件,用于设定力学图每一帧是怎样更新的.除此…