d3.js

绘制出数万条节点、边的拓扑图 针对拓扑图的需求一般要求都是数量级别能支持越多越好，但是由于浏览器性能问题，一般再没做啥优化，能支持到5000点差不多也就是极限了。那么接下来就一步一步聊聊我是怎么能支持

前言 前端导出功能 code 准备基础的图形绘制 效果图： code 导出svg图片 使用XMLSerializer的serializeToString()方法返回 DOM 子树序列化后的字符串。 用

前言 效果图： 基础代码准备 基础代码效果图： code 实现焦点定位效果 实现效果图： core code 完整代码 结束语

前言 基础图形绘制代码 效果图如下： 绑定基础zoom code 效果图： 如何解除zoom绑定 code 放大缩小按钮功能键 code 效果图： 实现容器再画布居中显示 算法可以想像一下一个大盒子和

前言 上篇drag基础代码 效果图： code 选中多个小方块一块拖动 1、需要些选中事件（对事件不了解的可以往之前篇幅翻翻）。 2、如果有选中的小方块正好有我拖拽的的小方块那就要把选中的一块拖动（反

前言 先绘制下基础图形 效果图： code 使用d3.drag 效果图： code 源码 总结 结束语 大家好 我是三原，多谢您的观看，我会更加努力(๑•̀ㅂ•́)و✧多多总结。 每个方法都是敲出来验

前言 结合brush和zoom使用 效果图： code 解决通过zoom后brush影响框选算法问题 计算zoom后的坐标算法就是使用原始点的x乘transform的k，再加上transform的x,

前言 准备数据图形 效果图如下： code 开始绘制brush code 判断矩形是不是框选范围 把小矩形方块当作一个点 把框选矩形当作一个矩形（四个坐标已取到） 判断在不在矩形上（是不是大于左上角

前言 面临问题 简单回顾下数据绑定 1、渲染层： enter() （数据绑定会根据你绑定的值区分下次调用有咩有进入enter层） 2、修改层： data() （数据绑定会根据你绑定的数据绑判断你有没有

前言 效果展示 分析 柱状图也有坐标轴可以沿用之前的 折线图坐标轴方案 绘制出柱状图的柱子。 柱状图动画。 柱状图tooltip。 开始 先绘制出坐标轴 效果呈现： 总结：initCanvas()函数

前言 咱们这期就绘制一个折线图,那么咱们分析下绘制一个折线图需要什么？ 坐标轴（一个竖着和一个横着的） 来点网格线美观一下 折线图少不了曲线平滑的 如果再来个绘制连线的轨迹就更好了 好上面就是咱们要一

前言 对于前端来说过渡效果大家并不陌生：比如div1在{x：200, y: 200} 过渡到{x:500, y:500}这个运动动画的过程就是过渡。在d3js当然也是有动画的啊d3.transitio

这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战 前言 在上一篇咱们说到d3比例尺，那么咱们就用它来画一个坐标轴，就是柱形图或者折线图的坐标轴。d3也有对应的方法方便咱们绘制这些坐标轴。

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战 前言 大家通过之前一篇小demo沿着圆运动动画, 可能会对d3js产生了兴趣, 接下来咱们继续学习他的常用api, 针对这些api 我会输

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战 前言 发表了3篇文章吧 1、svg 基础svg图形属性 2、d3(一)基础语法api 3、d3(二)实现一个数据绑定的一套绘制方案 今天就来

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战 text text是用来绘制文本的 用法： 呈现效果： 声明：再svg重绘制文本就直接使用svg的text绘制的就行了 用d3js绘制大致这

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战 d3js开篇语 自从去年写项目需要一直再使用d3js，2年时间不说非常熟练吧，也是略有了解，有些心得分享给大家，分享给大家怎么一步步用d3j