d3.js 设置悬浮

2024-09-02

使用Three.js实现神奇的3D文字悬浮效果

声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景在 Three.js Journey 课程示例中,提供了一个使用 Three.js 内置方法实现的 3D 文字悬浮效果的例子,本文使用 React + Three.js 技术栈,参照示例实现类似的效果.本文中涉及到的知识点主要包括:CSS 网格背景.MeshNormalMaterial 法向材质.FontLoader 字体加载器.TextGeometry 文本缓冲几何体.

D3.js学习笔记（六）——SVG基础图形和D3.js

目标在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circle cx="25" cy="25" r="25" fill="purple&quo

使用JavaScript和D3.js实现数据可视化

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生发表于云+社区专栏介绍 D3.js是一个JavaScript库.它的全称是Data-Driven Documents(数据驱动文档),并且它被称为一个互动和动态的数据可视化库网络.2011年2月首次发布,在撰写本文时,最新的稳定版本是4.4版本,并且不断更新.D3利用可缩放矢量图形或SVG格式,允许您渲染可放大或缩小的形状,线条和填充,而不会降低质量.本教程将指导您使用JavaScript D3库创建条形图. 准备为

D3.js学习（七）

上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来的基础上添加两个东西. 添加一个按钮 <div id="option"> <input name="updateButton" type="button" value="Update" onclick="

D3.js学习（一）

从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有错误的还希望同学们帮我指出来.当然了, 可以的话我希望大家都可以去看看英文资料(文章后面将列英文资源),毕竟那才是原汁原味的D3. 好了, 废话到此,下面我们开始我们的学习之旅吧! 什么是D3.js? 一句话:D3.js是一个操纵数据的javascript库! 从一个简单的例子开始学习一个新的东西

D3.js学习记录

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

d3.js读书笔记-1

d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定到文档中(这里的文档指的是html文档)的元素,根据需要创建新元素: 解析每个元素范围内的数据并为其设置相应的可视化属性,实现元素的变换(transforming); 响应用户输入实现元素状态的过渡(transitioning); SVG D3最适合用来生成和操作SVG(Scalable Vecto

【 D3.js 进阶系列 — 6.1 】缩放的应用（Zoom）

缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.zoom() .scaleExtent([1, 10]) .on("zoom", zoomed); function zoomed() { circles_group.attr("transform", "translate(" + d3.event.

D3.js 用层画条形图

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-3-drawingDivBar</title> <script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script> &

【 D3.js 高级系列 — 10.0 】思维导图

思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有"树形".因此,可以凭借这两种布局来制作思维导图. 1. 构造思路树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下.有一个root对象: { name: "node1", children: [ { name:

【 D3.js 高级系列 — 9.0 】交互式提示框

一般来说,图表中不宜存在过多文字.但是,有时需要一些文字来描述某些图形元素.那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字.这是一种简单.普遍的交互式,几乎适用于所有图表.通过可给提示框定制外观,能给用户带来很好的体验. 1. 提示框的制作思路提示框,就是"文字"加"边框".显示文字,一般来说用 SVG 的<text>,但是,有两个问题: 如果字符串过长,<text>元素不能自动换行,虽然可以通过<

【 D3.js 高级系列 — 8.0 】标线

有时候,需要在地图上绘制连线,表示"从某处到某处"的意思,这种时候在地图上绘制的连线,称为"标线". 1. 标线是什么标线,是指地图上需要两个坐标以上才能表示的元素.例如,北京和上海之间连线.用于绘制标线的图形元素有两种:线段元素<line>和路径元素<path>.如果是在平面地图上,且不要求两点之间有曲线,<line>已足够:如果是在球面地图上,或对于平面地图上的曲线,则需使用<path>.标线有时带有箭头,表示方

【 D3.js 高级系列 — 4.0 】矩阵树图

矩阵树图(Treemap),也是层级布局的扩展,根据数据将区域划分为矩形的集合.矩形的大小和颜色,都是数据的反映.许多门户网站都能见到类似图1,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用. 图1 http://www.texastribune.org/2010/10/07/treemap-reveals-campaign-ad-trends/ 现以浙江.广西.江苏三省份2013年的GDP作为数据,以GDP大小作为节点的权重将其制作成矩阵树图. 1. 数据新建一个citygdp.j

【 D3.js 高级系列 — 2.0 】捆图

捆图(Bundle)是 D3 中比较奇特的一个布局,只有两个函数,而且需要与其它布局配合使用.本文讲述捆图的制作方法. 有关捆图的例子极少,很容易找到的是:http://bl.ocks.org/mbostock/1044242 但是此例有些复杂,不太容易弄懂,而且也没有相应的说明文字(D3官网上的例大多没有相应文字解说),根本无法作为参考.本文提供一个简单的例子,讲解捆图到底是什么,应该怎么做. 捆图只有两个函数: d3.layout.bundle():创建一个捆图布局. bundle(link

【 D3.js 高级系列 — 1.0 】文本的换行

在 SVG 中添加文本是使用 text 元素.但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢? 高级系列开篇前言从今天开始写高级系列教程.还是那句话,由于本人实力有限,不一定保证入门-进阶-高级,是一级比一级难的,大家选自己需要的阅读即可. 高级系列预计会先写一些常见的小问题(如本文)和剩下的三个布局(矩阵树图.堆栈图.捆图),然后写一些较复杂的图的制作方法,以及其交互式操作,例如:思维导图.多图联动.地图的标线标注等等. 近来嗓子像火烧一样,很不舒服,希望能快点好.o(>﹏

【 D3.js 选择集与数据详解 — 5 】处理模板的应用

在[选择集与数据 - 4]一文中,介绍了一个update.enter.exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法. 1. 模板复习一下上一章提到的模板. //绑定数据后,分别返回update.enter.exit部分 var update = selection.data(dataset); var enter = update.enter(); var exit = update.exit(); //1.update部分的处理方法 update.text( fun

【 D3.js 选择集与数据详解 — 2 】使用data()绑定数据

D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够处理数组长度与元素数量不一致的情况.当数组长度大于元素数量,能为多余数据预留元素位置,以便将来插入新元素:当数组长度小于元素数量时,能提供指向多余元素的方法,以便将来删除.下面来剖析data()是如何绑定数据的,相比datum()有哪些新功能. data()的工作过程假设body中有三个段落元素p

【 D3.js 选择集与数据详解 — 1 】使用datum()绑定数据

选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理,update .enter.exit 的原理和使用方法等,接下来一段时间里会有多篇此类文章. D3 最大的特色就是能够将数据绑定到DOM上.使用select或selectAll选择元素之后,被选择的元素上是没有数据的.数据绑定就是使被选择元素里包含有数据.与此相关的函数有两个: datum():将指

D3.js学习记录【转】【新】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

【 D3.js 高级系列 — 8.0 】打标

有时,需要在地图上画线.代表"从地方到什么地方"的含义,因此,在连接的映象绘制时.称为"打标". 1. 标线是什么标线.是指地图上须要两个坐标以上才干表示的元素. 比如,北京和上海之间连线.用于绘制标线的图形元素有两种:线段元素<line>和路径元素<path>. 假设是在平面地图上.且不要求两点之间有曲线,<line>已足够.假设是在球面地图上,或对于平面地图上的曲线,则需使用<path>. 标线有时带有箭头.表示

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 设置悬浮

热门专题