【用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛】的更多相关文章

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

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

D3.js+Es6+webpack构建人物关系图(力导向图)

功能列表:1. 增加下载SVG转PNG功能,图片尺寸超出可视区域也能够下载全部显示出来2. 增加图谱放大缩小平移功能3. 增加图谱初始化加载时自动缩放功能4. 增加导出excel功能,配合后台工具类达到导入excel的功能5. 增加右键菜单功能(删除,编辑)6. 增加拖拽添加连线功能7. 增加鼠标点击画布增加节点功能,支持批量添加并取消连续点击连续添加的功能8. 增加右键删除节点和左侧工具栏删除节点功能9. 增加环形布局10. 增加矩形布局 在此大神的代码基础上,进行了修改,源代码地址::htt…

D3.js+Es6+webpack构建人物关系图(力导向图)，动态更新数据，点击增加节点，拖拽增加连线...

觉得不错的麻烦加个Star:https://github.com/zhangzn3/D3-Es6 在线预览地址:https://zhangzn3.github.io/D3-Es6 功能列表:1. 增加下载SVG转PNG功能,图片尺寸超出可视区域也能够下载全部显示出来2. 增加图谱放大缩小平移功能3. 增加图谱初始化加载时自动缩放功能4. 增加导出excel功能5. 增加右键菜单功能6. 增加拖拽添加连线功能7. 增加鼠标点击画布增加节点功能8. 增加右键删除节点和左侧工具栏删除节点功能9. 增加…

D3.js画思维导图（转）

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

用D3.js画树状图

做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择了D3.js. 首先在html页面需要包含D3的js文件,其次我们需要将数据构造成json格式,然后存入到一个d3.json文件 { "name":"如何学习D3", "children": [ { "name":"预备…

用D3.js画的人物关系demo

代码下载地址:https://github.com/zhangzn3/group-explorer ### Demo1功能 *** * 支持节点拖拽 * 支持节点拖拽并固定位置 * 支持鼠标浮到节点显示节点信息 * 支持鼠标浮到节点隐藏不相关的节点及线 * 支持画布整体缩放移动 ### Demo2功能 *** * 支持节点拖拽 * 支持节点拖拽并固定位置 * 支持鼠标浮到节点显示节点信息 * 支持双击节点隐藏不相关的节点及线 可以累加双击的节点 * 支持双击画布空白处还原显示所有节点信息 * 支…

D3.js 做一个简单的图表（条形图）

柱形图是一种最简单的可视化图标,主要有矩形.文字标签.坐标轴组成. 本文为简单起见,只绘制矩形的部分,用以讲解如何使用 D3 在 SVG 画布中绘图. 一. 画布是什么 前几章的处理对象都是 HTML 的文字,没有涉及图形的制作. 要绘图,首要需要的是一块绘图的“画布”. HTML 5 提供两种强有力的“画布”:SVG 和 Canvas. 1.1. SVG 是什么 SVG,指可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形的一种图形格式,是由万维网联盟制…

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 ---画坐标轴

画坐标轴 //使用d3的svg的axis()方法生成坐标轴 var x_axis = d3.svg.axis().scale(scale_x), y_axis = d3.svg.axis().scale(scale_y) g.append("g") .call(x_axis) 页面效果如下:这个时候x轴在页面的上方,不在我们想要的位置,可以通过设置transform属性将坐标轴移到自己想要的位置 画y轴 g.append("g") .call(y_axis) 效果如…

7.利用canvas和js画一个渐变的

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas实例</title> <style type="text/css"> canvas{ width: 600; height: 300; border-width: 1px; border-style: solid; border-color: #c3c3…