- 博客(27)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 D3 v5.0 3D饼图（进化版）
先给个初代的传送门。https://blog.csdn.net/m0_37777005/article/details/90693963说明一下：1.末尾给出3D饼图填充的算法（感谢hightcharts大佬们开源）2.我做了一点基础元素的封装，可能你看不到path、text的render，...
2020-06-19 11:50:34
1146
原创 svg path飞线动画
https://www.jianshu.com/p/69dd56c28248https://zhuanlan.zhihu.com/p/67031777
2020-06-19 11:41:52
1307
原创 Three.js 纹理贴图
最近又入坑Three了，寻找道友ing。不写入门（camera，scene、renderer）—> 传送门 https://threejs.org/docs/index.html#api/zh/geometries/TetrahedronGeometry先看效果图（第一张是不带环境纹理的，第二张是带有环境纹理的）首先你已经有了camera、scene、renderer。其次你需要...
2019-07-24 18:03:04
2333
翻译 D3.js Path Transition（折线图的更新）
可视化肯定是需要及时更新数据的，每秒填充一次数据，渲染到图表中。大概思路就是：重绘line，向左平移，把多余的line 裁剪掉。 const n = 100; const duration = 1000; let time = new Date(Date.now() - duration); const random = d3.randomNormal(0...
2019-07-23 14:54:26
1148
1
原创 D3.js enter、update、exit的理解
本文以柱状图为例。数据分为三部分：update、enter、exit。假设有3个 p 元素，和一个长度为 5 的数组 arr 进行 bind。那还需要添加两个 p 元素才能实现1v1绑定，则添加的部分为 enter。若arr的数组长度为 1，则p元素多余两个，需要删除后才能实现1v1绑定，则删除部分为exit。本例子柱形图主要分为两部分：初始化、数据更新。//第一部分：初始化函数...
2019-07-23 11:04:20
792
原创 D3.js 饼图标签覆盖的问题
首先说明一下,本文没有具体画饼图的源码，可以去看我之前写的源码文章：https://blog.csdn.net/m0_37777005/article/details/90693746关于给饼图添加标签会产生覆盖的问题，没有找到完美的解决方案，只能解决一部分，需要应援，需要应援，需要应援。一般给饼图标签分为两种：第一种是饼图内部的标签（红框）第二种是饼图外部用弧线标记的标签（蓝框）下图是...
2019-07-17 11:39:15
806
1
原创 iframe+swiper轮播图
布局方式：iframe自适应高度+底部轮播图（swiper）。效果如图：<!DOCTYPE html><html lang="en"> <head> <link rel="icon" href="/favicon.png" type="image/x-icon" /> <meta name="x-server-env"...
2019-07-04 14:06:08
2134
1
转载 JavaScript中基本数据类型和引用数据类型的区别
原文地址：https://www.cnblogs.com/cxying93/p/6106469.html感觉深入浅出，mark一下。1、基本数据类型和引用数据类型ECMAScript包括两个不同类型的值：基本数据类型和引用数据类型。基本数据类型指的是简单的数据段，引用数据类型指的是有多个值构成的对象。当我们把变量赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值还是引用类型值。...
2019-06-11 11:09:37
76
翻译 D3.js v5.0 主题河流
emmm其实写到这里的话也差不多写完了基本的图形实现。因为先接触的v3.0+版的D3，现在是v5.0+的，写法上差别比较大，加上全是英文的API真的是硬伤。但是实现思路还是差不多的。有写错的请指正。有写的不好的地方请忽略。对于这个主题河流图，应该这么叫？我最开始的想法是和堆栈图联系起来的，想法是使用区域转换器d3.area()但是报错了，脑子糊了没找出来原因，所以放弃了。所以有大佬写出来...
2019-05-31 18:03:27
1524
翻译 D3.js v5.0 堆栈图
数据： data: [ { month: '2019-1-1', apples: 3840, bananas: 1920, cherries: 960, oranges: 300 }, { month: '2019-1-2', apples: 1600, bananas: 1440, cherries: 960, oranges: 400 }, { mont...
2019-05-31 17:50:53
621
翻译 D3.js v5.0 地图
先说一下D3有很多的地图投影方法，但是很遗憾的是没有拿到比较细化的世界地图的json数据，所以以常见的投影方式做了一个例子。安利一下获取中国地图的json数据：http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4老样子，先看截图。先看中国地...
2019-05-31 17:42:04
4572
1
翻译 D3.js v5.0 打包图
数据结构：{ "name": "flare", "children": [ { "name": "", "children": [ { "name": "", "children": [ { "name": "", "...
2019-05-31 17:18:55
893
翻译 D3.js v5.0 平行坐标系
先看运行截图吧数据结构[ { "name": "AMC Ambassador Brougham", //下面都对应的是坐标轴的值 "economy (mpg)": 13, "cylinders": 8, "displacement (cc)": 360, "power (hp)": 175, "weight (lb)": 3821,...
2019-05-31 17:05:09
1874
1
翻译 D3.js v5.0 旭日图
数据结构：{ "name": "flare", "children": [ { "name": "", "children": [ { "name": "", "children": [ { "name": "", "...
2019-05-30 16:53:56
2049
转载 解决IOS橡皮筋特效
**先强烈推荐这篇文章，收获颇多。**https://www.cnblogs.com/pqjwyn/p/9510035.html如果觉得内容太多，看起来有点懵x，可以先看这个推荐这篇文章：https://blog.csdn.net/weixin_42881744/article/details/84628962。所以mark一下认为较便捷的方法。使用iNoBounce工具。https:/...
2019-05-30 16:52:46
856
翻译 D3.js v5.0 气泡图
{ "name": "bubble", "children": [ { "name": "Atlas", "description": "Atlas of Global Agriculture", "children": [ { "name": "", "address": "", ...
2019-05-30 11:51:02
2051
翻译 D3.js v5.0 弦图
数据结构：[ { "name": "flare.analytics.cluster.AgglomerativeCluster", "size": 3938, "imports": [ "flare.animate.Transitioner", "flare.vis.data.DataList", "flare.util.math....
2019-05-30 11:44:49
567
翻译 D3.js v5.0 树图（二）
数据结构同上一节。https://blog.csdn.net/m0_37777005/article/details/90694362import * as d3 from 'd3';// 矩阵树图export default function treeChart2(id, dataset) { const width = 900; const height = 1000; ...
2019-05-30 11:40:16
942
翻译 D3.js v5.0 树图（一）
树图主要有两种：树枝状的树图与矩阵树图。本节描述树枝状的树图数据结构：{ "name": "flare", "children": [ { "name": "", "children": [ { "name": "", "children": [ { ...
2019-05-30 11:37:36
3115
翻译 D3.js v5.0 饼图与环形图（二）
环形图import * as d3 from 'd3';export default function pieRatio(node, name, ratio, color) { // 基础数据初始化 const svgObj = { width: 124, height: 124, paddingTop: 28, }; const radiusO...
2019-05-30 11:30:03
714
翻译 D3.js v5.0 3D饼图
3D的饼图主要可看成 2D饼图（最上层）+外曲面组成。3D的环形饼图主要可看成 2D饼图（最上层）+外曲面+内曲面组成。所以渲染也分为了几部分。#render.jsimport * as d3 from 'd3';import { draw, transition } from './renderUtil';const salesData = [ { label: 'Basi...
2019-05-30 11:22:15
7669
2
翻译 D3.js v5.0 饼图与环形图（一）
/* eslint-disable no-param-reassign */import * as d3 from 'd3';export default function pieChart(id, dataset) { const width = 400; const height = 400; const fontsize = 14; const svg = d3 ...
2019-05-30 11:13:39
1127
2
翻译 D3.js v5.0 散点图
数据结构：[{“name”: ‘’,“x”: ‘’,“y”:’’},]import * as d3 from 'd3';export default function scatter(id, data) { (() => { d3.select(id) .selectAll('svg') .remove(); })(); con...
2019-05-30 11:03:33
548
翻译 D3.js v5.0 折线图
#折线图 export default function CountyLC(id,dataset) { const width = 400; const height = 400; const svg = d3 .select(id) .append('svg') .attr('width', width) .attr('height', height...
2019-05-30 10:57:32
1864
翻译 D3.js V5.0 词云图（标签云）
#词云图需要安装d3-cloud 插件。https://www.npmjs.com/package/d3-cloud实现代码如下：const width = 500;const height = 500;const color = d3.scaleOrdinal(d3.schemeCategory10);const svg = d3.select(id).append(‘svg’...
2019-05-30 10:52:14
4717
世界地图word.json
2019-05-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人