D3学习入门指北
文章平均质量分 76
孟晓骏
这个作者很懒,什么都没留下…
展开
-
D3学习指北--第四章应用,冒泡排序可视乎的功能增加
D3学习指北–第四章应用,冒泡排序可视乎的功能增加前言 本节内容将结合冒泡排序可视化的内容,给他添加以下几种样式:1、横坐标轴与纵标轴。2、柱形图柱形的宽度,借助比例尺,全部添加到坐标轴里。3、为了更直观,将冒泡排序交换的柱形,变成红色。特别说明:坐标轴的原始区间为坐标轴的刻度,坐标轴的映射区间为坐标轴的长度。第一步:分析需求一个x轴,一个y坐标轴。x坐标轴下表为第几个,y坐标轴下表为[0,最大值]。一个解决柱形图的交换柱形颜色的变换,我采用的方式为交换的索引数放到一个数组,利用过原创 2021-03-31 22:51:14 · 305 阅读 · 0 评论 -
D3学习指北–第四章,比例尺和坐标轴
D3学习指北–第四章,比例尺和坐标轴1、前言 虽然上节我们画了柱形图,但是,其中还有很多的地方需要完善,最重要的一点就是我们的坐标轴还没有完成,那么我们今天所学的内容,能帮我们给柱形图加上坐标轴,首先,我们先思考一个问题,这样能更有效的帮助我们学习今天的内容。我们的网页宽度有限,坐标轴表示的数据无限大,我们怎么把无限大的数据放到有限的长度内呢? D3给出的解决方法是“比例尺”,功能是能把一个区间映射到一个你想要的数据区间中,这也应该是我们大多数人想到的方法。下面就开始了今天的讲解,因为原创 2021-03-28 22:48:50 · 791 阅读 · 0 评论 -
D3.js学习指北--第三章,D3的基础操作
D3学习指北–第三章,D3的基础操作前言 因为这个系列是学习总结与理解,所以基础的东西并不会全部讲解,只是基础学习之上的参考,每个人都要有自己的思考。流言止于智者,尽信书不如无书等语句希望大家谨记。另外,D3支持链式操作。1、元素选择操作 D3提供了两种元素选择函数select和seclectAll两种,可以根据标签名,id名,class查找。d3.select(".one").select("#two").selectAll("p")这段代码的意思是“查询第一个class为one的标原创 2021-03-22 16:58:46 · 515 阅读 · 0 评论 -
D3.js学习指北--第三章应用,冒泡排序的可视化
D3学习指北–第三章应用,冒泡排序的可视化前言本章前面已经讲了D3选择操作,以及选择后返回的选择集的操作。那么我们应用一下,利用d3.js写一个冒泡排序的可视化。首先第一步:分析需求一个冒泡排序算法(这个是算法设计问题,本章我将不讨论,直接给出)一个数据柱形图展示(这是本章应用的关键,我将一步一步讲解)var showconf = {"left":50,"top":50,"bom":50,"right":50,"width":50};第二部:需求技术分析:冒泡排序算法:va原创 2021-03-22 17:02:54 · 774 阅读 · 0 评论 -
D3.js学习指北--第二章,基础复习
D3学习指北–第二章,基础复习1、关于html的svg标签 html5里有很多个标签,但是关于D3的应用多用在一个标签上< svg >svg标签可以理解为一个绘画板,里面提供了各类的工具可以在画板上面作画,提供的工具我们下面会一个一个介绍。关于svg标签在html里面表示为<svg></svg>。熟练运用svg可以让你很顺利的学习D3。2、svg内标签的style svg内标签的css常用属性有以下几种:fill :颜色 为图形内部颜色strok :颜原创 2021-03-22 14:20:42 · 264 阅读 · 2 评论 -
D3.js学习指北--第一章,前言
D3学习指北–第一章,前言1、何为指北? 通常别人写的博客为指南,目的是为了给人介绍,讲解他所熟知的内容。这个系列之所以起名为“指北”,是因为我也是出入D3.js的学习,故其中的只是总结不可以全信,根据自己的理解稍加思考,转化为自己的知识。2、我对D3的态度。 虽然初学D3没多少天,甚至没有花多少时间,但是我已经决定了放弃python的数据可视化转投D3.js的学习。D3.js的丰富操作,与灵活的操作能成为未来我主用的可视化方法,会是我主要应用的一个工具。3、自我介绍。 这是我第一次正原创 2021-03-22 14:12:34 · 184 阅读 · 0 评论