![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
d3
Tong XU
欣赏简洁的代码是一种赏心悦目的事情。
展开
-
【D3.js】selection.style一个小坑
在官网上该方法介绍的很详细,其中关于单位的介绍是浏览器会自动添加单位:因此:selection.style('top', 0);这种情况渲染出来的元素的top值会为0px而如果采用function的形式;selection.style('top', (d, index) => index * 20);这种情况默认只会给selection中第一个element的top值添加px。所以,需要在返回的值加上px。正确用法为:selection.style('top', (d, index.原创 2020-08-09 16:39:01 · 252 阅读 · 0 评论 -
d3 实现圆弧过渡的效果
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>使用圆弧生成器</title> <script src="../js/d3.js"></script> </head> <body> ...原创 2020-02-09 11:22:30 · 916 阅读 · 0 评论 -
d3.js 使用定时器
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>TEST-5</title> <script src="https://d3js.org/d3.v4.js"></script> <style type="t...原创 2019-12-26 09:52:36 · 644 阅读 · 0 评论 -
d3.js 监听过渡事件
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>TEST-5</title> <script src="https://d3js.org/d3.v4.js"></script> <style type="t...原创 2019-12-26 09:36:40 · 500 阅读 · 1 评论 -
d3.js 使用选择性过渡
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>TEST-5</title> <script src="https://d3js.org/d3.v4.js"></script> <style type="t...原创 2019-12-26 09:24:36 · 140 阅读 · 0 评论 -
d3.js 使用级联过渡
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>TEST-5</title> <script src="https://d3js.org/d3.v4.js"></script> </head> <...原创 2019-12-25 21:23:46 · 113 阅读 · 0 评论 -
d3.js 使用中间帧计算
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>TEST-5</title> <script src="https://d3js.org/d3.v4.js"></script> <style type="t...原创 2019-12-25 21:19:47 · 194 阅读 · 0 评论 -
d3 利用barchart制作动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>TEST-5</title> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>...原创 2019-12-25 20:07:03 · 417 阅读 · 0 评论 -
d3.js 如何获取元素的类名
博主在d3.js的官网上看到selection.classed()方法,所以想当然的认为可以获取className,即使不然。正确获取className的方法是:selection.attr('class')后来想想也确实是这样的,毕竟class也是属于属性的范畴。...原创 2019-12-24 14:56:35 · 1096 阅读 · 0 评论 -
Vue.js 计算属性缓存导致的Bug
计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量message的...原创 2019-12-09 11:27:05 · 1272 阅读 · 0 评论 -
d3 一个很好看的d3 scale
d3.scaleOrdinal() .domain(data.map(d => d["_key"])) .range( d3 .quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length) .reverse() ...原创 2019-12-03 19:34:29 · 135 阅读 · 0 评论 -
d3 axis简单案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://d3js.org/d3.v4.js"></script> </head> <body&...原创 2019-12-01 14:53:46 · 343 阅读 · 0 评论 -
【d3 基础教程】尺度--Scale
1. 简介作为数据可视化开发者,我们总是在反复做一个非常关键的事情:将数值从数据领域映射到图形领域。例如:将最近一次453美元的采购映射为一个653像素的长条;又如,将昨晚23.59美元的酒吧账单映射为一个34像素的长条。从某种程度上讲,这就是数据可视化的全部内容-将数据高效、准确地映射为图形。什么是尺度?对于函数f,集合A是它的定义域,集合B是它的值域。试想,如果A代表数据域,B代表...原创 2019-12-01 13:40:28 · 624 阅读 · 0 评论 -
d3.js制作力学图
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>力学图的制作</title> <script type="text/javascript" src="js/d3.js"></script> <script ...原创 2019-10-24 12:38:36 · 206 阅读 · 0 评论 -
使用D3 画出一个带坐标轴的柱形图
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>TEST-3</title> <!-- <script type="text/javascript" src="js/d3.js"></script> &l...原创 2019-10-22 11:43:47 · 347 阅读 · 0 评论 -
d3.js读取csv和tsv文件
1. CSV格式是什么CSV使用逗号分隔值,它是以纯文本形式存储表格数据的,每个单元格之间用逗号分隔。在d3.js中读取csv文件:d3.csv("table.csv", function(error, csvdata){ if(error){ console.log(error) } console.log(csvdata)})...原创 2019-10-24 14:44:48 · 3108 阅读 · 0 评论 -
【d3基础教程】第一篇---选择元素
选择器方法接受W3C选择器字符串,例如:.fancy来选择类名为fancy的元素,或者div来选择标签名为div的元素。选择器方法有两种形式:select和selectAll。d3.select(selector)仅仅会选择匹配的第一个元素。(接受的参数可以为字符串,也可以为具体的节点)<p>123</p><p>234</p><p&...原创 2019-10-25 19:05:17 · 685 阅读 · 0 评论