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-force 力导向图 以实现一个关系网来说，d3-force 力导向图是不二的选择。 d3-force 是 D3.js 实现以模拟粒子物理运动的 velocity Verlet 数值积分器的模块，可用来控制粒子和边秩序。在 力导向图 中，d3-force 中的每个节点都可以看成是一个放电粒子，粒子间存在某种斥力（库仑斥力）。同时，这些粒子间被它们之间的“边”所牵连，从而产生牵引力。 而 d3-force 中的粒子在斥力和牵引力的作用下，从随机无序的初态不断发生位移，逐渐趋于平衡有序。整个图只有点 / 边，图形实现 样例 较少且自定义样式居多。 下图就是最简单的关系网图，想要实现自己想要的关系网图，还是动手自己实现一个

上周四(6.20)GMTC2019大会的第一天，很荣幸作为「UI与图形渲染」专场出品人获得了与图形领域几位技术专家同场交流的机会。 图形技术在前端范畴内是一个相对小众的话题，虽然前端工程师几乎每天都在跟图形打交道(CSS)。CSS能够满足绝大多数的需求，即便偶尔遇到相对复杂的UI(比如描边文字)，稍加使用canvas或SVG便足以应对。大多数前端工程师在日常开发工作中并不会(也没必要)思考每个CSS方块背后的底层技术原理。除了从事于数据可视化、地图、游戏等强依赖图形技术行业的人以外，Canvas/SVG/WebGL及其背后的数学知识对于大多前端工程师而言都比较陌生。所以在一个前端大会上，尤其是在“大前端”以及“全栈”概念越来越普及的时代背景下，一个受众群体非常有限的小众技术专场便显得异常冷门和特立独行。当然，做图形专场的目的并不是为了凸显自身的与众不同，而是因为图形技术对前端工程师至关重要，具体原因稍后再表。 主办方在筹备GMTC2019之初并未设定图形专场，后承蒙主办方首肯采纳本人的建议，将去年的「UI与动画」专场更名为「UI与图形渲染」。其实我之所以极力争取设立图形专场有一点小小的私心，因为我本人从事于地图行业，目前的工作绝大多数是跟WebGL打交道但是水平非常粗浅，所以很想跟此领域的技术专家们请教一些技术问题。然而仍然高估了这个领域的从业者规模，讲题的收集异常艰难。相比去年的

前言 leaflet 入门开发系列环境知识点了解： leaflet api文档介绍 ，详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件 ，leaflet 的插件库，非常有用 内容概览 leaflet 实现地形剖面分析 源代码 demo 下载 本篇 demo 利用 leaflet api 实现地形剖面分析，效果图如下： 完整demo源码见小专栏文章尾部 ： GIS之家leaflet小专栏 文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波 来源： oschina 链接： https://my.oschina.net/u/4346195/blog/3499728