拓扑图的一点心得体会

·  阅读 132

废话不多，先上图。

分类：
前端
标签：
d3.js
相关推荐
  • 古柳_Deserts_X
    5月前
    d3.js 数据可视化
    手把手带你上手D3.js数据可视化系列（一）
    按照自己想写的逻辑来写的D3.js数据可视化系列，可能和网上教程不太一样的风格。虽然目标是初学者也能更容易上手，但可能也不是那么容易达到，欢迎大家反馈与指正。
    • 933
    • 评论
    手把手带你上手D3.js数据可视化系列（一）
  • ssthouse
    3年前
    数据可视化 d3.js
    用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛
    原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 可以看到, 上图左上角为图例, 中间为各个手机公司之间的专利关系图. 下面让我们看看如何一步步实现上图的效果. 需要注意的是: 有一些公司 (如 Apple, …
    • 1724
    • 3
  • 古柳_Deserts_X
    6月前
    d3.js 前端
    安利一些不错的D3.js数据可视化资源
    一篇本应该很早以前就写的文章，拖到现在终于填坑了(请脑补做出这个违背祖宗的决定有多挣扎，不是)。又臭又长，但希望能对还没入门 D3.js 数据可视化的人有帮助
    • 1832
    • 2
    安利一些不错的D3.js数据可视化资源
  • jsweber
    2年前
    d3.js
    公司内部分享——D3.js的简单使用
    本篇是入门中的入门，甚至不会涉及svg，因为d3并不会帮我们去屏蔽svg和canvas的相关知识，只是让你更好的控制它们，所以为了快速了解d3的使用，这里用dom做渲染。 D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助…
    • 1714
    • 评论
  • phoebemoon
    2年前
    d3.js
    利用D3.js实现思维导图
    由于公司需求，所以需要做数据可视化。看了很多库，觉的D3.js库很强大，于是决定用D3.js库。 在使用树状图时，看到固定的树形图，在想能不能做了思维导图了，于是便开始了探索。。。
    • 4228
    • 2
  • niGoDeLe
    1年前
    d3.js
    180行代码，基于D3.js手把手教你实现图片标注功能1.0
    公司最近在开发一个打标签平台，其中有个一功能模块就是对图片进行标注（例如将图片里的人、汽车进行标记），简单地来讲就是在图片加个形状（矩形、圆形。。），可以移动及大小设置。因为最近在学习D3,就想能不能基于D3来实现这个功能呢，然后就用D3实现了这个需求,下面是我测试的一个小de…
    • 1536
    • 7
  • GeekPlux
    3年前
    d3.js 数据可视化
    数据可视化之 Sankey 桑基图的实现
    Google 搜索桑基图，可以搜到一大堆定义。简而言之，桑基图是一种数据流图，展示了数据是如何从左到右流向最后的节点，每条边代表一条数据流，宽度代表数据流的大小。桑基图常用于流量分析，可以很清楚的看出数据是如何渐渐分流的。本文着重讲解如何实现，理论方面的东西各位可以自行了解。 …
    • 1565
    • 评论
    数据可视化之 Sankey 桑基图的实现
  • 黄刀小五
    9月前
    d3.js
    “D3.js” 手绘分段折线图
    👺 本文以实现上图为最终目的，所有过程均服务于结果，而非对svg、D3.js的系统学习。 👺 朋友，你是否与我有相同的功能诉求，使用主流的图表库不易满足我们的需求；朋友，你是否又和我一样急于求成，想在短时间内完成相应的功能开发。如果屏幕前你也有相同的想法, 那D3是一个不错…
    • 717
    • 2
    “D3.js” 手绘分段折线图
  • ssthouse
    3年前
    Canvas d3.js
    D3.js + Canvas 绘制组织结构图
    上面的demo就是使用 D3.js + Canvas 的方式实现的, 在组织的层数超过300时才会出现明显的卡顿, 能满足大部分的组织结构图的数据. 上面的变量 nodes 和 links 现在就包含了结构图中每个 组织节点 和 连接线 的坐标信息. 2. 使用Canvas绘图…
    • 5468
    • 9
  • 快狗打车前端团队
    2年前
    CSS 前端 d3.js
    【动画】想怎么动就怎么动，在我的地盘你得听我的
    简单概述下上面的gif，布局采用了d3实现，针对这种需求常规的可视化图形插件(如ECharts、ichartjs等)，通过简单的配置可能已无法做到，就算能实现灵活度也必然受到了限制。熟悉d3的同学实现起来也不会太复杂，图中主要是数字的变化以及弧形的颜色渐变的效果应如何实现，以及…
    • 4715
    • 11
  • taosapp
    2年前
    d3.js
    D3js v3 更新到 v5的代码改写
    之前一个时间轴的项目用的是d3js的v3版，今天有空就升级到v5版，学习一下新的写法。
    • 923
    • 评论
  • 三原
    4月前
    前端 d3.js
    【d3js】手把手教你绘制一个折线图
    前言 咱们这期就绘制一个折线图,那么咱们分析下绘制一个折线图需要什么？ 坐标轴（一个竖着和一个横着的） 来点网格线美观一下 折线图少不了曲线平滑的 如果再来个绘制连线的轨迹就更好了 好上面就是咱们要一
    • 603
    • 3
    【d3js】手把手教你绘制一个折线图
  • vivo互联网技术
    1年前
    d3.js 前端框架
    初识 D3.js ：打造专属可视化
    一、前言随着现在自定义可视化的需求日益增长，Highcharts、echarts等高度封装的可视化框架已经无法满足用户各种强定制性的可视化需求了，这个时候D3的无限定制的能力就脱颖而出。如果想要通过D
    • 5402
    • 7
  • 暮而归
    1年前
    d3.js
    D3js 实现bar-chart-race
    最近PM让我用d3实现bar-chart-race,然后我上d3官网,看了一下例子,有现成的,哦豁,真好!(^▽^)链接https://observablehq.com/@d3/bar-chart-r
    • 926
    • 5
  • 南空大喻喻
    2年前
    d3.js
    基于d3.js的关系拓扑图
    偶然在掘金上看见 @大搜车无线开发中心 的一篇关于《使用 d3.js 力导布局绘制资源拓扑图》的文章，想起实习僧的时候做过类似的关系拓扑图，斗胆放到掘金上哈哈哈。GitHub地址
    • 3732
    • 评论
  • 董傲
    2年前
    数据可视化 d3.js
    数据可视化，仿写d3-dsv，数据解析模块
    该模块为文本分隔符分隔进行解析，常见的数据格式为逗号分隔的csv文件或制表符分割的tsv文件，这些表格非常受excel欢迎，而且比json更节省空间，代码实现基于论文RFC 4180Common Format and MIME Type for Comma-Separated …
    • 887
    • 评论
  • ssthouse
    3年前
    SVG d3.js
    用D3.js 十分钟实现字符跳动效果
    原文分为三部分, 在这里笔者将其整合为了一篇方便阅读. 该效果基于 D3.js, 主要使用到了 d3-selection. 如果对d3-selection的基本使用逻辑不太清楚可以参见 这篇文章. Step1 首先代码会随机生成一个字符串, 该字符以绿色进入画面. 1. 字符切…
    • 2331
    • 评论
  • Evelynzzz
    2年前
    d3.js
    D3.js 制作柱状图
    D3是用于数据可视化的Javascript库。使用SVG，Canvas和HTML。结合强大的可视化技术和数据驱动的DOM操作方法。 D3是数据驱动的，JQuery不是：我们使用JQuery直接操纵元素；但是使用D3时我们需要通过D3专有的data()，enter()和exit(…
    • 1620
    • 评论
  • HeyWyy
    1年前
    d3.js
    OpenStreetMap的iD编辑器介绍
    在OpenStreetMap中用个人账号登陆，在编辑下拉框中选择使用iD编辑器。 主要利用iD.coreGrap，graph图层最主要的就是将实体的唯一id和实体联系在一起。这样的好处是，当我们添加、删除实体时,生成一个新的graph，然后它直接引用旧的graph上的未改变的实…
    • 768
    • 4
  • 三原
    4月前
    前端 d3.js
    【d3js】d3js实现一个围绕圆运动的动画效果
    这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战 前言 发表了3篇文章吧 1、svg 基础svg图形属性 2、d3(一)基础语法api 3、d3(二)实现一个数据绑定的一套绘制方案 今天就来
    • 1296
    • 4
    【d3js】d3js实现一个围绕圆运动的动画效果
    • 高级前端工程师
    获得点赞307
    文章被阅读35,290
    下载稀土掘金APP
    一个帮助开发者成长的社区
    相关文章
    svg、canvas、css3d实现数据可视化（伪3D效果）
    218点赞
     · 
    21评论
    使用dagre-d3做一个dag图（关系图）
    30点赞
     · 
    7评论
    canvas简单封装一个echarts实现不了的饼图
    25点赞
     · 
    4评论
    A Rejection Sampler（拒接采样）
    0点赞
     · 
    0评论
    使用 es3、es5、es6 实现简单工厂模式、单例模式、观察者模式、发布订阅模式
    15点赞
     · 
    0评论