d3-v4.x版本基本图形实现
dengzeyuan
1033432257
展开
-
d3-v4.x版本-世界地图
v4.x 版本-世界地图代码是基于vue 2.x版本项目中,代码注释部分为关键点解释都是基于d3-v4.x版本的。demo实现效果图如下:一、球形世界地区二、等距圆通投影实现代码如下:(包含关键代码注释)两种实现方式代码都放在了一起,前半部分被注释掉的为 球形世界地区 <template> <div class="hello"> ...原创 2018-11-20 14:57:08 · 3653 阅读 · 1 评论 -
d3-v4.x版本-柱状图
v4.x 版本-柱状图代码是基于vue 2.x版本项目中,代码注释部分为关键点解释都是基于d3-v4.x版本的。demo实现效果图如下:实现代码如下:(包含关键代码注释)<template> <div class="hello"> </div></template><script>const d3 ...原创 2018-11-19 17:29:04 · 309 阅读 · 0 评论 -
d3-v4.x版本-折线图
v4.x 版本-折线图代码是基于vue 2.x版本项目中,代码注释部分为关键点解释都是基于d3-v4.x版本的。demo实现效果图如下:实现代码如下:(包含关键代码注释)<template> <div class="hello"> </div></template><script>const d3 =...原创 2018-11-20 10:30:05 · 828 阅读 · 0 评论 -
d3-v4.x版本-散点图(拖拽、缩放散点元素)
v4.x 版本-散点图(拖拽、缩放散点元素)代码是基于vue 2.x版本项目中,代码注释部分为关键点解释都是基于d3-v4.x版本的。demo实现效果图如下:一、默认状态二、拖拽散点元素因为加了延迟动画,所以拖动的时候会有延时的动画效果。三、缩放散点元素;注意:在滚轮对元素放大/缩小的时候,相应的坐标系也是会跟着放大/缩小实现代码如下:(包含关键代码注释...原创 2018-11-20 10:52:36 · 1589 阅读 · 0 评论 -
d3-v4.x版本-环状图
v4.x 版本-环状图代码是基于vue 2.x版本项目中,代码注释部分为关键点解释都是基于d3-v4.x版本的。demo实现效果图如下:实现代码如下:(包含关键代码注释)<template> <div class="hello"> </div></template><script>const d3 ...原创 2018-11-20 11:05:54 · 580 阅读 · 0 评论 -
d3-v4.x版本-力导向图
v4.x 版本-力导向图代码是基于vue 2.x版本项目中,代码注释部分为关键点解释都是基于d3-v4.x版本的。demo实现效果图如下:每个节点都可以进行拖拽,并伴随力矩的效果 实现代码如下:(包含关键代码注释)<template> <div class="page"> </div></template>...原创 2018-11-20 11:16:08 · 1443 阅读 · 0 评论 -
d3-v4.x版本-弦图
v4.x 版本-弦图代码是基于vue 2.x版本项目中,代码注释部分为关键点解释都是基于d3-v4.x版本的。demo实现效果图如下:实现代码如下:(包含关键代码注释)<template> <div class="hello"> </div></template><script>const d3 = ...原创 2018-11-20 14:32:39 · 737 阅读 · 0 评论