D3.js

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

可视化前端初探(一)--D3.js

一.D3.js概述1.D3是什么D3的全称是（Data-DrivenDocuments），翻译过来就是一个被数据驱动的文档。简而言之，就是一个主要是用来做数据可视化的JavaScript的函数库。
nightZing·2020-01-08 01:59

Echarts大数据可视化物流航向省份流向迁徙动态图，开发全解+完美参数注释

最近在研究Echarts的相关案例，毕竟现在大数据比较流行，比较了D3.js、superset等相关的图表插件，还是觉得echarts更简单上手些。
Tz张无忌·2020-01-07 16:00

Echarts大数据可视化物流航向省份流向迁徙动态图，开发全解+完美参数注释

最近在研究Echarts的相关案例，毕竟现在大数据比较流行，比较了D3.js、superset等相关的图表插件，还是觉得echarts更简单上手些。
TZ张无忌·2020-01-07 16:00

使用Apache搭建本机作为服务器试验d3.js显示效果

Apache搭建流程及注意事项下载Apache其官方网址为http://httpd.apache.org/,windows版本下载地址具体为此处.选择相应的版本号下载即可.此处选择版本为2.4.18VC11,本地存放位置为:K-软件->00实用小工具->Apache安装及配置解压安装包并放置在系统盘根目录下在解压好的目录下又说明文档,下面主要步骤也是按照此文档进行,唯一多出来的地方是对遇到问题的解
star_phoenix·2020-01-07 12:50

d3地图

D3.js的作者认为GeoJSON不太好，比较推崇TopoJSON格式。
肖雨·2020-01-05 18:17

d3.js制作条形时间范围选择器

此文章为原创文章，原文地址：https://www.cnblogs.com/eagle1098/p/12146688.html效果如上图所示。本项目使用主要d3.jsv4制作，可以用来选择两年的时间范围，两端按钮切换年，在时间轴上标注可以选择的时间范围和关键时间点。时间数据可以在前端配置，也可以从后端请求。此程序相对比较简单，主要涉及d3的比例尺和拖动处理。1）d3的比例尺其实就是把一个范围的数据
eagle1098·2020-01-04 01:00

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

这一节，我们将继续以以做带学的方式对d3.js进行学习。目标：制作饼图，并给它添加一些相应的动画和交互事件。
金字笙调·2020-01-03 21:16

55种数据可视化开源工具

工欲善其事必先利其器，本文对55个流行的数据可视化工具开源协议，主页，文档，案例等资源的进行简单介绍，其中包括著名的D3.js，R，Gephi，Raphaël，Processing.js，TableauPublic
数据科学·2020-01-01 05:45

D3.js入门指南

◆搭建简易的D3开发环境◆搭建基于NPM（NodePackagedModules是Node.js的套件管理工具）的开发环境◆理解D3风格的JavaScript1.1简介本章旨在帮助读者初步认识并且运行D3
出版圈郭志敏·2019-12-31 16:14

D3 v5 学习笔记-1 选择器

D3.js是基于数据操作文档的JavaScript库，通过HTML、SVG和CSS赋予数据以生命。
夜舞暗澜_3ea2·2019-12-30 23:37

数据可视化专家的七个秘密

类似JavaScript的可视化库如D3.js,Raphaël,以及Paper.js,以及最新浏览器所支持的如Canvas和SVG，以及使得那些过去
圆脸咪咪·2019-12-30 22:08

使用 d3.js 绘制资源拓扑图

使用d3.js绘制资源拓扑图wzb网易游戏高级开发工程师，现主要负责CMDB的前端开发工作背景随着业务的发展，项目下的各种资源会越来越多，越来越复杂。
nieops·2019-12-30 11:25

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

在去年的这个时候，d3.js在github上的star数目刚20多k，如今人数已经飙升至67k，其风靡程度可见一般，随着大数据的发展，数据可视化也被越来越被重视，前端工程师中又多出来一个发展方向——数据可视化工程师
金字笙调·2019-12-26 04:19

D3.js小白的快速入门及学习资源

我是2015年开始学习D3.js，这几年也经常写D3的代码，想给大家分享一下我D3学习的过程及用到的资源。首先，介绍一下D3.js是什么。
广陵啸_e613·2019-12-23 23:07

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

在可视化的开发中，中国地图是很常用的一种图表类型，这里我们简要介绍一下，在这里制作完成一个带插入位置点和提示框的交互式中国地图。需要准备的数据中国地理位置信息(geojson数据是从网上下载的)位置点信息{"name":"地点","location":[{"name":"北京","log":"116.3","lat":"39.9"},{"name":"上海","log":"121.4","lat"
金字笙调·2019-12-22 20:36

基于D3.js实现分类多标签的Tree型结构可视化

关键词:可视化,D3.js,python,前端,代码0.Why今天新来的实习生需要对部分分类文本进行多标签的检测，即根据已构建好的一、二级标签Excel文档，对众包平台人工标注的数据以及机器标注的数据进行评测
流川枫AI·2019-12-21 23:13
上一页 6 7 8 9 10 11 12 13 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他