关注
分享
文章平均质量分 84
本栏目希望能帮大家解决D3 V4版本API带来的困扰
终极目标：结合d3的优点和echarts的优点开发可视化工具库。
短期目标：柱状图 、折线图、饼状图、力导向图、弦图、树状图、集群图、捆图、打包图、直方图、分区图、堆栈图、矩阵树图，简单实现
闲人王昱珩
不忘初心，就不错了
展开
-
D3 v4.x入门（1-终章）—— 地图探究
为保长城不倒烈马长枪握好眼看时间不早对的起江东父老路上苦头不少为求长生不老你看我巍巍河山中华屹立不倒！本系列第一阶段最后一章，给大家推荐一个D3领域的大佬https://my.csdn.net/lzhlzz为了防止大家找不到地图json文件的资源，下面是地图资源的传送门https://blog.csdn.net/lzhlzz/article/details/413...原创 2018-08-15 16:43:41 · 2167 阅读 · 1 评论 -
D3 v4.x入门（1-13）—— 矩阵树图探究
矩阵树图和之前的区域分布图其实有点像，看图说话~ 相比于区域分布，矩阵树图多个了纬度叫做权重，括号里的数值就是权重，权重越大，占的区域越大。源码如下。关于这个系列有什么想要讨论的问题可以+Q 380205984 发邮件什么的我一般都懒得回，QQ邮件的打开速度太慢了~<template> <div id='svgContainer' style="">...原创 2018-08-15 15:17:04 · 3410 阅读 · 0 评论 -
D3 v4.x入门（1-12）—— 堆栈图探究
堆栈图布局可以计算二维数组每一数据层的基线？？？看图说话，堆栈图可以用于三维数据的展示，x轴和y轴 是两个维度，新增了颜色维度，也就是三个维度，堆栈图的好处是可以将数据堆叠起来，关于堆栈图的衍生，用区域生产器绘制堆栈图暂且放一放，本文主要展示上图实现的代码。<template> <div id='svgContainer' style=""> &l...原创 2018-08-15 15:10:26 · 1412 阅读 · 0 评论 -
D3 v4.x入门（1-11）—— 分区图（普通和圆形）
本章实现的是分区图预告一下下一章会研究堆栈图，下下章最终章是地图探究，第一阶段的内容会在地图探究后结束，结束后就将进入第二阶段的优化，以echarts为标准，实现echarts的图形动画效果，实现echarts的交互。有兴趣的童鞋可以关注下后续内容~分区图代码如下<template> <div id='svgContainer' style="">...原创 2018-08-14 15:47:02 · 1831 阅读 · 0 评论 -
D3 v4.x入门（1-10）—— 直方图简介和实现
在放直方图的源码之前我先简单介绍下直方图，一般我都不会去介绍某种可视化图形是做什么的，如果一种图形不能让你对数据一目了然的话，那一定是你选错了展示方式。但直方图的概念还是有必要说一下，以免惯性思维造成了使用上的误解。 惯性思维：直方图和柱状图差不多？好像一样~ 我也是这么想的，当然D3不会那么傻，实际上很好区分，柱状图表示散列点的数值展示，而直方图，表示的是某一区间的数据之和的...原创 2018-08-14 15:34:28 · 1035 阅读 · 0 评论 -
D3 v4.x入门（1-9）—— 含简单交互的打包图
依旧是预告了后面的研究内容，本章主要探究打包图，这里补充一句，由于捆图的研究遇到了困难，效果不是很好，暂时不放入此系列，可能在第二阶段的bug探究及性能优化中放出源码及解决方案。对于本系列有疑问的童鞋可以在下面提出问题，可能在后续的过程中我解决的可以直接帮助到你。下面是打包图的效果图和源码<template> <div id='svgContainer' s...原创 2018-08-14 15:26:06 · 1645 阅读 · 0 评论 -
D3 v4.x入门（1-8）—— 集群图探究（普通和环形）
集群图本身和树状图差不多，因此也是用于处理树形结构数据的，和树状图不同的是，集群图的所有叶子节点（每个分支深度最深的节点）都放在统一深度的位置上，因此可以利用这个特性做一个圆，后面会给出源码。<template> <div id='svgContainer' style=""> <div class="every"> <h...原创 2018-08-14 15:15:13 · 2116 阅读 · 0 评论 -
D3 v4.x入门（1-7）—— 树状图探究
树状图，一般用于树形结构数据展示（废话呢么），下面源码实现上图效果<template> <div id='svgContainer' style=""> <div class="every"> <h3>树状图探究</h3> <div class="svg&quo原创 2018-08-14 14:55:22 · 3602 阅读 · 4 评论 -
D3 v4.x入门（1-6）—— 带交互的弦图
弦图主要用于表现多个节点间的联系，两节点间的连线表示这两个节点有联系，线的粗细代表权重，上图主要表现了各大洲的人口占比（数据纯属虚构） 依旧是V4版本的实现代码和注释（吐槽） <template> <div id='svgContainer' style=""> <div class="every"> <h3&g...原创 2018-08-14 14:38:30 · 1372 阅读 · 0 评论 -
D3 v4.x入门（1-5）—— 力导向图
本章主要分享可以拖拽的力导向图代码。 力导向图（图左上角）一般可以用于关系展现。本文参考的是乡村爱情中的部分人物关系图。 目前研究成果 （希望给大家在探索D3 V4.x版本的API的道路省点时间，有时候是真的想给那个作者寄刀片） 其他图的代码会在后面的文章中展示。 差不多已经画了十来个图，总结一下D3的作用。 要总结D3的作用，就要先从绘制一张图的流程说起。D...原创 2018-08-03 17:06:12 · 5010 阅读 · 2 评论 -
D3 v4.x入门（1-4）——带动画的饼状图
依旧是简单粗暴的饼图源码（带动画）<template> <div id='svgContainer' style=""> <div class="every"> <h3>饼图探究</h3> <div class="svg" id="pie&q原创 2018-08-02 11:38:43 · 1093 阅读 · 0 评论 -
D3 v4.x入门（1-3）—— 折线图和区域图实现
本文承接D3学习（2）的内容，贴出d3 v4.x折线图和区域生成器的代码部分。<template> <div id='svgContainer' style=""> <div class="every"> <h3>折线图探究 <div class="button" @cl原创 2018-08-02 11:23:42 · 3212 阅读 · 0 评论 -
D3 v4.x入门（1-2）—— 柱状图简单实现
现阶段探索成果（基于d3 v4.x版本）：现阶段的D3学习目标是把第一节承诺的所有可视化图形都'完成'。这个完成只是粗略的完成，目前不会去细究优化问题，原理问题，比较蛋疼的问题等等等等。总之，先通过完成这些图形熟悉一下D3常用的API。第一阶段的图形都只是简单完成，以熟悉v4.x的API为主，第二阶段考虑细节和优化，尽量接近于echarts的水平，第三阶段将会封装成API库，以供简...原创 2018-08-01 16:56:57 · 1484 阅读 · 0 评论 -
D3 v4.x入门（1-1）—— 简单粗暴的尝试
说到d3，就不得不提到echarts，这两个工具都是用于数据可视化的，什么是数据可视化？说白了就是用图表展示数据，看起来更直观，仅此而已。 个人使用过echarts做过数据可视化网站，但我对echarts具体是如何渲染图形还一无所知，当初学完canvas就没实践过，现在直接出了echarts，用原生canvas绘图的人也越来越少咯，可惜可惜。echarts还没开始了解，大佬又布置了任务，...原创 2018-08-01 08:51:29 · 2875 阅读 · 0 评论