d3.js中的attr

2024-09-04

d3.js（v5.7）的attr()函数完善（添加obj支持）

因为习惯了jquery的attr(obj)批量添加属性,所以刚开始看到d3为dom添加属性要一个一个添加的时候真的是十分想吐槽,既然想实现attr(obj),根据传入对象的键值对批量添加dom属性,那就得改它的源码了. 因为看d3的dom是这样选择的: d3.selectAll("h1"): 那么直接打印这个,控制台显示的是一个Selection对象,如图: 并且获得这个节点之后,是可以直接通过attr()来为dom添加属性的,那么我们就来看d3下的selection,控制台conso

D3.js中对array的使用

由于D3类库和array密切相关,我们有必要讨论一下D3中的数据绑定以及在数组内部运算的方法. 1.D3中的数组和其他编程语言一样,D3的数组元素可以是数字或者字符等类型,例如: someData=[20,36,48,59,600,88]; 此外,考虑json数据在网络传输中的便利性,D3数组也支持将json对象,如: someBook=[{name:"book1", price: 50}, {name:"book2", price: 150}, {name:&q

D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形

D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并不知道是不是还叫布局,我觉得也可以这么叫,反正布局指的也是一个绘图函数) 下面是d3中一些常见的部分图形 bubble —— 泡泡图 packing —— 打包图 bundling —— 捆图 force —— 力导向图 chord —— 弦图 pie——饼状图 tree——树状图中国地图我们利

D3学习之：D3.js中的12中地图投影方式

特别感谢:1.[张天旭]的D3API汉化说明.已被引用到官方站点: 2.[馒头华华]提供的ourd3js.com上提供的学习系列教程,让我们这些新人起码有了一个方向. 不得不说,学习国外的新技术真的是一个非常艰苦的过程. 在学习D3绘制地图的过程中.有朋友建议看一下当中投影的说明比較好.于是,凭借我这半吊子不到的英文水平,大致给翻译了下来,仅供參考: 原文链接:https://github.com/mbostock/d3/wiki/Geo-Projections#albers D3中一共提供了1

D3.js力导向图中新增节点及新增关系连线示例

大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://d3js.org/d3.v4.min.js&qu

D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决

上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后添加的Group2及Group2内的其他元素会遮盖先添加的Group1及Group1中的其他元素. 举个栗子别人都在过520,我在这里玩栗子 =.=: 向SVG中添加了一个Group1,又添加了一个Group2: 先向Group2中添加一个节点Group2_Node,在向Group1中添加一个节点

D3.js的v5版本入门教程（第七章）—— 比例尺的使用

D3.js的v5版本入门教程(第七章) 比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和range呢?等一下你就会看到,因为我们在建立比例尺是常常会用到domain()和range()两个函数,当然不是绝对的,D3中有很多类型的比例尺) 下面介绍在本套教程中常用的两种比例尺线性比例尺序数比例尺线性比例尺 domain域和range域都可以连续变化 <body> <sc

用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

前言本文灵感来源于Mike Bostock 的一个 demo 页面原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: github 在线演示 : demo 效果可以看到, 上图左上角为图例, 中间为各个手机公司之间的专利关系图. 图例中有三种线段: 红色实线: 正在进行专利诉讼 (箭头指向方为被诉讼方) 蓝色虚线: 诉讼已经结束绿色实线: 专利已经授权实现下面让我们看看如何一步步实现上图的效果. 分析数据 [

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

此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/12146688.html 效果如上图所示. 本项目使用主要d3.js v4制作,可以用来选择两年的时间范围,两端按钮切换年,在时间轴上标注可以选择的时间范围和关键时间点.时间数据可以在前端配置,也可以从后端请求. 此程序相对比较简单,主要涉及d3的比例尺和拖动处理. 1)d3的比例尺其实就是把一个范围的数据映射到另一个范围的数据上此处,我们使用线性比例尺:d3.scaleLinear() 它可

【 D3.js 入门系列 --- 2.1 】关于如何选择，插入，删除元素

在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同时操作) 来看一个具体的例子,现有如下代码: <html> <head> <meta charset="utf-8"> <title>select,append,exit</title> </head> </

D3.js 第一个程序 HelloWorld

一.HTML 是怎么输出 HelloWorld 的 <html> <head> <meta charset="utf-8"> <title>HelloWorld</title> </head> <body> Hello World 1 Hello World 2 </body> </html> 会在浏览器

【 D3.js 入门系列 — 1 】第一个程序 HelloWorld

记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld,这是惯例.呵呵,想来真是令人怀念. 好了,言归正传吧.本文的主要内容也是围绕 HelloWorld,不过不是单纯的输出. 1. HTML 是怎么输出 HelloWorld 的都知道 HTML 吧,如果不知道请下百度一下吧.在 HTML 中输出 HelloWorld 是怎样的呢,先看下面代码: <h

D3.js学习笔记（一）——DOM上的数据绑定

开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文,来和大家分享 .当然,更推荐看英文原文教程了,点击这里. 简单例子在这个例子中,你将会使用D3.js来把数据绑定到简单网页的DOM元素(DOM element)上. 现在开始了!下面是一个简单的HTML网页: <!DOCTYPE html> <html> <head>

D3.js系列——初步使用、选择元素与绑定数据

D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的. D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可视化方面,D3 已经将生成可视化的复杂步骤精简到了几个简单的函数,你只需要

【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取

在入门系列的教程中.我们经常使用 d3.json() 函数来读取 json 格式的文件.json 格式非常强大.但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 OpenOffice Calc 等生成的表格文件,由于简单易懂,easy编辑. Microsoft Excel 一般会保存为 xls 格式. OpenOffice Calc 一般会保存为 ods 格式. 这些格式作为表格文件来说都非常强大.但要读取它们是有些麻烦的.D3 中也没有提供这个方案.可是表格

【 D3.js 入门系列 --- 2.1 】关于怎样选择，插入，删除元素

本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的差别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的所有(以用于后面同一时候操作) 来看一个详细的样例,现有例如以下代码: <html> <head> <meta cha

D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素

D3.js的v5版本入门教程(第五章) 1.选择元素现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下假设我们的<body>中有三个,如下 dog cat pig rat 选择第一个元素 var p = d3.select("body&qu

D3.js的v5版本入门教程（第三章）—— 选择元素和绑定数据

D3.js的v5版本入门教程(第三章) 在D3.js中,选择元素和绑定元素是最基本的内容,也是很重要的内容,等你看完整个教程后你会发现,这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的 1.选择元素在D3.js中,选择元素的函数有两个 d3.select() d3.selectAll() 这两个函数返回的就是选择集常见的用法如下: var body = d3.select("body");//选择文档中的body元素 var svg = body.s

D3.js的v5版本入门教程（第四章）—— 理解Update、Enter、Exit

D3.js的v5版本入门教程(第四章) Update.Enter.Exit是D3.js中很重要的概念,下面来讲一下它们到底是什么?(当你看完后.你就会知道如果数据集个数和选择集个数不匹配的情况下使用data(),D3.js会怎么办) 在使用data()时,例如现在我们有一个数组[3,6,9,12,15],我们可以将数组每一项与一个绑定,但是,现在就有一个问题——数据集个数和选择集个数不匹配怎么办?这样就需要理解Update.Enter.Exit 例子一:update和enter:数组[3

D3.js 力导向图的显示优化

D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部分太少.和 EChart.Chart.js 等相比,D3.js** 的相对来说自由度会高很多,得益于 D3.js **中的 SVG 画图对事件处理器的支持,D3.js 可将任意数据绑定到文档对象模型(DOM)上,也可以直接操作对象模型(DOM)完成 W3C DOM API 相关操作,对于想要展示自己

D3.js使用过程中的常见问题(D3版本D3V4)

目录一.学习D3我必须要学习好SVG矢量图码? 二.如何理解D3给Dom节点绑定数据时的Update.Enter和Exit模式三.D3绑定数据时用datum与data有什么不一样? 四.SVG图中用attr来设置属性和用style来设置样式时,用style来设置样式的权重会更高五.D3使用链式写法时,写完transition动画后不能链着继续写append添加元素操作六.如何给path设置缓动? 七.D3普通的缓动动画八.给节点添加title,鼠标mouseover显示普通提示文本效果

d3.js中的attr

热门专题