D3.js

可视化工具D3.js教程 入门 （第十四章）—— 中国地图

首先我们需要的是中国地图的json数据：请戳这里接下来咱们直接上代码：代码：中国地图//获取svgvarsvg=d3.select('svg');varwidth=svg.attr('width');varheight=svg.attr('height');//创建区域分组varg=svg.append('g').attr('transform','translate(0,0)');//创建一个地
&执念·2020-04-02 16:00

可视化工具D3.js教程 入门 （第十三章）—— 树状图

首先我们还是说下这章要用到的知识点，我在这里只是简单的罗列一下，如需详细了解，请戳这里查看中文官方文档d3.hierarchy-从给定的层次结构数据构造一个根节点并为各个节点指定深度等属性.node.sum-评估和汇总定量值.d3.tree-创建一个新的整齐(同深度节点对齐)的树布局.tree-将指定的层次数据布局为整齐的树布局.tree.size-设置布局尺寸.tree.separation-设
&执念·2020-04-02 16:00

可视化工具D3.js教程 入门 （第十二章）—— 力导向图

力导向图的概念这里就不细说了，力导向图适合绘制关系型的信息；下面先来说几个关于力导向图的知识点：1、d3.forceSimulation([nodes])创建一个新的力导向图；2、simulation.force(name[,force])如果指定了force则表示添加指定name的force（力学模型）并返回仿真，如下：varsimulation=d3.forceSimulation(nodes
&执念·2020-04-02 16:00

可视化工具D3.js教程 入门 （第十一章）—— 饼图

首先我们先梳理下绘制饼图之前需要掌握的新知识：1、d3.arc(arguments..)生成器用来在饼图或圆环图中生成圆形或扇形或环形；arguments是任意的;它们只是简单地传递到arc生成器的访问器函数的对象。例如，根据默认的设置，传入的对象应该包含以下半径和角度信息:arc({innerRadius:0,outerRadius:100,startAngle:0,endAngle:Math.
&执念·2020-04-02 16:00

可视化工具D3.js教程 入门 （第十章）—— 交互式操作

这里所说的交互式操作，就是说的图表的事件监听。on('eventName',funvtion(){...})第一个参数是要监听的事件名称第二个参数是要执行的函数跟jquery类似。下面咱们在上一张的柱状图基础上，给咱们的柱状图增加鼠标移入与移出事件，改变其颜色代码：Titlevardata=[90,75,12,36,54,88,24,66];varmargin=30;//svg上下左右边距vars
&执念·2020-04-02 16:00

可视化工具D3.js教程 入门 （第九章）—— 让图表动起来

在为图标增加动画之前，应该了解几个新的api如下d3.transition()开启一个动画过渡。transition.duration()指定每个元素的持续时间（以毫秒为单位）。transition.delay()指定每个元素的延迟时间（以毫秒为单位)更详细的api讲解请戳这里！代码:Titlevardata=[90,75,12,36,54,88,24,66];varmargin=30;//svg
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第八章）—— 一个简单柱状图

直接上代码：Titlevardata=[90,75,12,36,54,88,24,66];varmargin=30;//上下左右边距varsvg=d3.select('svg');varwidth=svg.attr('width');varheight=svg.attr('height');//创建一个矩形分组varg=svg.append('g').attr('transform','trans
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第七章）—— 坐标轴

直接接着上一章的图表，继续加上一个x坐标轴scaleLinearvardata=[7.3,5.3,3.3,2.3,1.3];//定义比例尺varscaleLinear=d3.scaleLinear().domain([0,d3.max(data)]).range([0,800]);varg=d3.select('svg').append('g').attr('transform','transla
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第六章）—— 比例尺的使用

1、比例尺是什么？比例尺能将“一个区间”的数据映射到“另一个区间”。例如[0,1]对应到[0,300]，当输入0.5时，输出150。或者将[0,1,2]对应到["red","green","blue"]，当输入2时，输出blue。上述示例中的[0,1]和[0,1,2]称为定义域，[0,300]和["red","green","blue"]称为值域。定义域和值域之间的映射方法称为对应法则。要理解比例
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第五章）—— 一个简单的图表

从这里开始我们就将开始画一个简单的图表了在此之前，最好掌握以下svg的基本知识。一个间的的例子如下：Titlevardata=[730,530,330,230,130];varg=d3.select('svg')//获取svg.append('g')//创建分组.attr('transform','translate(30,30)');//图表距离视口的左、上距离varrectHeight=30;
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第四章）—— 选择 插入 删除

1、选择元素第一章有说过d3.select()和d3.selectAll();这两个方法的选择器与jQuery的元素、属性、css选择器使用方法基本一样，下面我们就说下他们的区别；d3.selectAll()；选择的是所有匹配到的元素；d3.select(‘.calss’)、d3.select(‘#id’)、d3.select(‘div’)、d3.select(‘[name="zh"]’)等都是选
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第三章）—— 理解 Update Enter Exit

咱们来说说UpdateEnterExit他们的使用由于上一篇说到的data()方法给元素绑定数据是需要元素与数据一一对应的关系，那么如果元素个数与数据个数对不上了怎么办？有可能存在元素多了或者数据多了的情况，对于这种情况就需要用到咱们要说的这三个方法了,或者说数据绑定的三个步骤，Update更新元素节点（绑定数据时默认进行的）Enter增加元素节点（这个的后面会用的很多）Exit删除元素节点举例如
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第二章）—— 选择元素与数据绑定

D3.js就是在元素选择与元素数据绑定的技术上进行后续操作的，所以元素选择与数据绑定是基础。
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第一章）—— hello world

1、利用D3.js在网页上显示一些文字内容；代码hellovarh3=d3.select("body").selectAll("h3");h3.text('日照香炉生紫烟')运行效果：假如你第一次接触D3
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 (V5版)

可视化工具D3.js，就不赘述他的简介与下载了，官网上看，直接上教程：可视化工具D3.js教程入门（第一章）——helloworld可视化工具D3.js教程入门（第二章）——选择元素与数据绑定可视化工具
&执念·2020-04-02 15:00

d3.js加载本地地图

在处理的过程中，首先要将本地的shapefile格式的数据转换为json格式，然后通过引用该脚本将点展示出来。看似简单，但是在处理过程中还是发现了很多问题，由于转换出来的json文件是投影坐标，导致地图变成了“畸形”，对比网上示例代码的json文件，发现其中点数据的坐标都是以经纬度形式出现，经过查阅发现coordinates（经纬度），另外geojson与json其实没有太大的区别（GeoJSON
紫虚上人·2020-04-01 17:20

d3.v5各种scale傻傻分不清

在d3.js的语境下，scale用来生成某集合与实数的映射。
ValdisW·2020-03-31 18:06

第一夜-enter与exit

d3.js在绑定数据后，一般会看到enter或exit两个函数。那它们到底是做什么用的呢？直接看一下代码和效果：既然是JavaScript的框架，我们就用一个HTML文档作为测试的起点。
花神Flora·2020-03-31 13:28

d3.js - force力学图

现已升级为npm包，方便大家使用新文章传送门relation-chart效果预览链接可进行拖拽，缩放demo.jpg高亮选中的节点高亮选中以下是旧文章版本D3.jsV4版本详细文档力模型：d3.forceSimulation([nodes])用指定的节点数组创建一个新的力模拟。默认为空数组。如果节点被指定时，将仿真的节点到指定对象数组，初始化它们的位置，每个节点必须是一个对象，由力模型分配以下：i
谢大见·2020-03-31 01:28

D3.js Hello World

将上一篇文章中下载的zip解压缩后我们们得到了3个文件：d3.js、d3.min.js和许可证文件。在开发过程中，建议使用d3.js，它可以帮你深入到D3库中跟踪调试JavaScript代码。
Andone1cc·2020-03-29 13:36

D3.js学习笔记(4)--数据元素操作及事件

理解D3中的Update、Enter、Exit解决的问题是选择集跟数据的数量不对等的情况,下面这段代码中selectAll并没有选中任何rect元素，.enter()的作用就是当发现当前选择的并没有这个元素（相当于length==0）就会先占了一块地方然后新建一个缺失的相应元素加入到这块占了的地方svg.selectAll("rect")//选择svg内所有的矩形.data(dataset)//绑
黄清淮·2020-03-28 16:52

利用css对shiny页面优化及利用htmlwidgets包创建HTML控件

本演讲将介绍如何利用CSS对shiny页面进行个性化设计及在网页中嵌入视频；并通过一个详细案例介绍了利用htmlwidgets包开发HTML控件，基于D3.JS库创建简单的交互桑基图，包括控件创建、函数修改
IT大咖说·2020-03-26 18:33

已看书籍- 前端

、JavaScript高级程序设计（第3版）3、WebKit技术内幕4、HTML5游戏开发(全)（以后看）5、CANVAS游戏开发实战（以后看）6、nodejs权威指南7、深入浅出nodejs8、精通D3
大前端之路·2020-03-24 06:58

d3.js竖向直方图与交互式提示框，V3与V4

效果图上一篇文章写了如何根据数据表生成横向直方图，这次来写一下竖向直方图的生成和交互式提示框的加入.与横向相同，数据——比例尺——矩形——坐标轴.不过在画直方图之前，先来考虑一下浏览器适配的问题.动态SVG如果想要SVG图形可以随浏览器改变大小，应注意以下设定：varwidth="100%";//宽度与父元素保持一致varheight="100%";//高度与父元素保持一致varcountry_s
LSD_Monkey·2020-03-22 19:43

使用D3.JS进行文字渐变 text gradient effect in d3.js

使用以下模板即可：usingthefollowingtemplate:vis.select(".需要改变的文字的类")//theclassthetexttobechangedbelongsto.transition().style("opacity",0).duration(500).transition().duration(500).style("opacity",1).text("最终需要变
避雷殝·2020-03-22 02:10

D3.js结合Angular.js制作图表

在Angular中使用D3制作图表，我们可以根据图表的种类创建不同的指令和对应的服务。比如创建一个柱状图时，我们在模块下创建一个barChart指令：myComponents.directive('barChart',function($compile){'usestrict';return{restrict:'AE',scope:{chartTitle:"@",//图表标题series:"=",
Evelynzzz·2020-03-18 17:44

D3.js 力导向图的拖拽（drag）与缩放（zoom）

不知道大家会不会跟我一样遇到这样的问题，在之前做的力导向图的基础上加上缩放功能的时候，拖动节点时整体会平移不再是之前酷炫的效果（失去了拉扯的感觉！）。天啊，简直不能接受如此丑X的效果。经过不懈的努力终于解决了这个问题。以下是事情发生的原因及解决的代码：varzoom=d3.behavior.zoom().scaleExtent([1,10])//缩放范围.on("zoom",zoomed);fun
黄清淮·2020-03-17 17:57

知识图谱可视化工具选型

目录背景选型原则筛选D3.js优点缺点cytoscape.js优点缺点AntvG6优点缺点networkx优点缺点最终选择后续参考资料背景本人作为大一狗，有幸参加了老师的工业大数据知识图谱可视化研究的项目
bruuuuuuuuno·2020-03-16 23:24

绘制柱形图

d3.js实现柱形图varwidth=500,height=400;varpadding={left:50,top:50};vardataSet=[22,26,9,20,40,60,90,20,60,40
Vijay_·2020-03-16 09:34

D3.js的V5版本-Vue框架中使用-流程图

因最近公司项目用到流程图,网上找了些资料,自己写写,总结下效果展示使用dagre-d3需要安装dagre-d3库，d3的流程图库。代码示例（封装组件）//得到流程图绘制对象this.graph=newdagreD3.graphlib.Graph().setGraph({//控制方向rankdir:this.direction}).setDefaultEdgeLabel(function(){ret
水落斜阳·2020-03-16 03:23

D3.js初体验

所以，今次我们来玩玩强大的D3.js，这可谓是近年来最受欢迎的可视化组件了。D3的自由度非常高，可以提供给玩家们很多想象与发挥空间，支持创作多种自定义的图形。
俊爷拒做学渣·2020-03-15 11:19

D3.js + React.js 实现柱状图

D3.js+React.js实现数据可视化系列本篇文章代码源于https://github.com/CBDxin/chart这是一个基于D3.js+React.js实现数据可视化库，目前已实现了柱状图、饼图、区域图、折线图、气泡图等多个图形，还带有炫酷的动画效果，实用的数据区域筛选功能。目前仍处于开发阶段，请大家多多关注。假如我们现在有这样的一组数据：letdataSet=[{x:"一月",y:6
CBDxin·2020-03-13 23:21

《数据分析实战-托马兹.卓巴斯》读书笔记第2章-变量分布与相关性、图表

你将学习以下主题：·生成描述性的统计数据·探索特征之间的相关性·可视化特征之间的相互作用·生成直方图·创建多变量的图表·数据取样·将数据集拆分成训练集、交叉验证集和测试集2.1导论接下来的技巧会使用Python与D3
邀月·2020-03-13 16:00

D3.js学习笔记(2)--做一个简单的柱形图

D3学习例子の做一个简单图表数据为什么需要可视化，举个例子在一组数字中很少有人可以在极短的时间内找出其中最大的值，但是绝对有很多人能在很多的柱状图中找到最高的那一个。这就是数据可视化的好处，能帮助人们快速的筛选信息以及有更加美观友好的展示方式。以下是一些概念：画布HTML5提供两种强有力的“画布”：SVG和Canvas。svgsvg是可缩放矢量图形有以下特点1、SVG绘制的是矢量图，因此对图像进行
黄清淮·2020-03-11 23:21

d3-sankey 桑基图数据量过大的情况下页面混乱

项目中需要使用桑基图的图表，对比百度的echarts和d3.js中的桑基图的例子，抱着学习的态度，选用了d3.js(version4).废话不多说，直接上代码：Sankeybody{padding:10px
mujiaxiansheng·2020-03-11 22:31

d3.js

D3(或D3.js)是一个用来使用Web标准做数据可视化的JavaScript库。D3帮助我们使用SVG,Canvas和HTML技术让数据生动有趣。
xiumeiii·2020-03-11 05:23

svg/d3.js折线图展示数据

初次接触d3.js，能感觉到它的强大，想要完全搞懂还是要花一番功夫，最近用它画了个折线图作为入门，以后还要多学习，请大家指教。
youfrweb·2020-03-10 03:51

Moreal D3.js Wiki

导读此文乃的学习笔记(https://kb.moreal.co/d3/),简略看了一下感觉甚好.以下这段话摘自此网站:Whatisthisdocumentandwhoisitintendedfor?SinceMikeBostock,creatoroftheD3library,sharedtheexcellentD3.jslibrarywithallofus,wethoughtweshouldgiv
雷朝建·2020-03-07 16:46

D3.js常用图形

varele=d3.select('body')//select()返回一个对DOM中匹配的第一个元素的引用.append('p')//append()创建一个新DOM元素，然后将其追加到条用的元素末尾.text('newparagraph');//text()接收字符串，将其插入当前元素的开始和结束标签之间vardataset=[3,2,1];vareles=d3.select('body').
JunChow520·2020-03-06 20:00

nvd3柱状图制作

最近初次接触D3.js和nvd3.js。
Evelynzzz·2020-02-17 00:00

d3.js主要布局种类总结

本文在较早之前在本人知乎账号为“BOOM”的数据可视化专栏发表过：知乎链接，所以也可到本人知乎上的文章分享查看更多文章）（本文章代码来自网络与《D3API详解》这本书，收集做学习交流之用）说明：本文实用d3
stayhungry_e89f·2020-02-13 18:56

d3.js饼图绘制，V3与V4.

饼图的绘制稍微复杂一点点，主要是网上很多教程还是老版本d3.这里用的是D34.0APIReference.效果图和上几篇文章写到的一样，首先新建svg，考虑缩放问题，长高"100%"，提供给后面svg使用.在这里我直接给了两个list做数据了，一个是用来画饼图的数据，一个是上面的文字.同时新建一个list存放你想要用的颜色列表.varwidth="100%";varhight="100%";var
LSD_Monkey·2020-02-12 12:31

深入浅出d3.js数据可视化之道（2）

上一节中，我们对数据可视化进行了一些基本的介绍，包括其选择器选择，数据绑定方式以及属性的设置，和图表数据的更新等一些操作，今天，我们来学习制作一些柱状图，并对其中用到的一些api进行讲解。svg矩形位置设定x:矩形左上角x轴坐标y:矩形右上角y轴坐标width:矩形的宽度height:矩形的高度rx:对于圆角矩形，指椭圆在x轴方向的半径ry：对于圆角矩形，指椭圆在y轴方向的半径例如：坐标系统比例尺
金字笙调·2020-02-09 09:33

自学前端还是软件测试?

我本人就是从事前端工作，前端的话技术更新太快，所以你要保持时时刻的学习，这样的话会比较幸苦，而且要学习的很多，而且前端的要求越来越高，就拿2019年用到的新技术来说typescript,flutter,d3
LinminWang·2020-02-08 03:57

d3.js 使用方法 从0起步个人学习过程（1）

注意：所有资料均是从d3手册翻译而来刚开始学习d3发现最大的问题是手册都英文的，有中文翻译，但是是针对API的，这个对于刚开始初学者很不方便，所以，个人在边学的过程中，把学过的部分翻译下来，以便英文不好的童鞋参考ThreeLittleCircles三个小圆这是用SVG画的三个小圆，效果如上也可参考手册，因为测试，所以跟手册上的效果会不一样SelectingElements选择元素，这一步了解d3的
老者偏方·2020-02-07 13:18

深入浅出d3.js数据可视化之道（4）

在此之前，我们学习了柱状图和饼图的制作，了解了比例尺，坐标轴的建立，学会了数据绑定和一些自定义交互事件。这一节，我们将使用d3模仿echart的气泡图，学习散点图的制作，并复习巩固一下之前的知识。这一节用到的知识点比较多，但是难度不高，我们直接进行图形绘制，用到时再详细讲解。准备的数据constcircle_data=[{apple:[[0.5,0.5],[1.6,0.6],[1.2,1.7],[
金字笙调·2020-02-06 09:58

深入浅出d3.js数据可视化之道（5）

在经过了一个阶段的学习之后，我们对基本的坐标轴和比例尺都有了很好的了解，今天我们结合之前的内容，配合节流函数来制作一款精美的可交互折线图。准备的数据constline_data=[{country:"china",gdp:[[2008,2033],[2009,2400],[2010,4333],[2011,5600],[2012,6500],[2013,6700],[2014,6933],[201
金字笙调·2020-02-02 06:42

深入浅出d3.js数据可视化之道(5)(续)

在之前的折线制作过程中，我们选择使用的平滑曲线，这一节我们学习一下带锚点的折线图配合区域图的制作方法。准备的数据constline0_data=[{type:"历史平均",value:[['2016/07',1.4],['2016/08',1.5],['2016/09',1.8],['2016/10',1.9],['2016/11',1.6],['2016/12',2.5],['2017/01',
金字笙调·2020-02-01 17:52

深入浅出d3.js数据可视化之道（7）

今天给大家带来的是比较常见的力导图。力导图的应用场景很多，表示关系连接的很多都可以用力导图来实现，比如企业投资关系，汽车行程路线等等。为了尽可能模拟工作中使用力导图的场景，我们这里直接使用json数据来完成今天力导图的制作。模拟数据和初始化画布constwidth=500,height=500;varsvg=d3.select('body').append('svg').attr('width',
金字笙调·2020-02-01 16:52

D3.js 实现带伸缩时间轴拓扑图的示例代码

效果图:基于d3-v5,依赖dagre-d3,直接上代码:Documentsvg{border:1pxsoliddarkcyan;}/*拓扑图--start*//*节点状态颜色*/g.type-current>circle{fill:#FFAC27;}g.type-success>circle{fill:#9270CA;}g.type-fail>circle{fill:#67C23A;}g.typ
Assan·2020-01-20 09:01
上一页 6 7 8 9 10 11 12 13 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他