D3.js
文章平均质量分 92
isOllie
一只菜鸡
展开
-
D3.js 前端报错 Uncaught TypeError: a[b].target.className.indexOf is not a function at qu.v.ni(……)
Uncaught TypeError: a[b].target.className.indexOf is not a function at qu.v.ni (eval at xhr.onreadystatechange (demo05.html:419), :405:129)前段时间在做力向图的时候发现的错误,突然间前端控制台就刷了几百条报错出来,后来多方查找之后发现Chrome 的翻译功能...原创 2020-01-25 15:41:27 · 759 阅读 · 1 评论 -
数据可视化 D3.js 力导向图右键菜单实现动态添加节点
前段时间将力导向图节点绑定上了菜单,实现了节点能够右击展开菜单功能这次更新实现动态更新节点数据。本次使用的D3 版本是V4原创 2019-11-12 11:21:26 · 5444 阅读 · 4 评论 -
数据可视化 D3 力导向图鼠标右击菜单的制作及缩放(zoom)和拖拽(drag)的应用
先展示一波最终效果最终效果这段时间再学习D3,力导向图力导向图(Force-Directed Graph),是绘图的一种算法。在二维或三维空间里配置节点,节点之间用线连接,称为连线。各连线的长度几乎相等,且尽可能不相交。节点和连线都被施加了力的作用,力是根据节点和连线的相对位置计算的。根据力的作用,来计算节点和连线的运动轨迹,并不断降低它们的能量,最终达到一种能量很低的安定状态。力导...原创 2019-11-06 18:39:17 · 3917 阅读 · 3 评论 -
数据可视化 D3 图表的绘制(三)添加坐标轴
坐标轴<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...原创 2019-10-30 10:39:52 · 1788 阅读 · 0 评论 -
数据可视化 D3.js 图表的绘制(二)为图表加上比例尺
比例尺将某一区域的值映射到另一区域,其大小关系不变。这被称之为比例尺比例尺分为两种:线性比例尺序数比例尺(我的D3版本是v4的,这里v3在更新到v4之后,方法变动了很多,d3官方将方法进行了规范,本文中的比例尺就被规范了,v3,v4版本在比例尺方法上使用就不一样)线性比例尺var dataset_1 = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; ...原创 2019-10-27 16:55:41 · 607 阅读 · 0 评论 -
数据可视化 D3.js 图表的绘制(一)做一张简单的图表
画布 绘图的前提是有一张画布,HTML 5 提供两种强有力的“画布”:SVG 和 Canvas。SVG SVG,指可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形的一种图形格式,是由万维网联盟制定的开放标准。 SVG 使用 XML 格式来定义图形,除了 IE8 之前的版本外,绝大部分浏览器都支持 SVG,可将 SVG 文本直接嵌入 HTML...原创 2019-10-27 16:50:04 · 3044 阅读 · 0 评论 -
数据可视化 D3.js 元素的插入与删除
插入元素插入元素主要有两个函数append():在选择集末尾插入元素insert():在选择集前面插入元素append( ) <p id="First">First</p> <p id="Second">Second</p> <p id="Third">Third</p><!-- a...原创 2019-10-27 12:58:10 · 944 阅读 · 0 评论 -
数据可视化 D3.js 元素绑定
元素绑定元素的绑定有两中方法,datum()和data()datum():绑定一个数据到选择集上data():绑定一个数组到选择集上,数组的各项值分别与选择集的各元素绑定var str = "China"; var body = d3.select("body"); var p = body.selectAll("p"); p.datu...原创 2019-10-27 12:35:17 · 473 阅读 · 0 评论 -
数据可视化 D3.js 选择集与选择元素
选择集d3.select() 选择第一个元素d3.selectAll()选择所有元素使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象,就是选择集。选择元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2019-10-27 12:34:43 · 424 阅读 · 0 评论 -
数据可视化 D3.js 与JavaScript对比
使用JavaScript来更改Html// 使用JavaScript var paragraphs = document.getElementsByTagName("p"); for (let i = 0; i < paragraphs.length; i++) { var paragraph = paragraphs.item(i)...原创 2019-10-27 11:26:04 · 1019 阅读 · 0 评论 -
数据可视化 D3.js v4版本简介及相关技术
D3简介 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个 被数据驱动的文档 。听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的。如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程。 JavaScript 文件的后缀名通常为 .js,故 D3 ...原创 2019-10-24 13:55:15 · 1210 阅读 · 0 评论 -
数据可视化 D3.js v3v4版本比较及方法的变化汇总
这段事件在学习D3 翻到的一些博客和看的学习资料都比较早普遍都是v3版本的,但是我下载的版本却是v4的因此也确实造成了一些麻烦。 以下将会总结我在学习时遇到的因版本变化而造成的一些小麻烦。比例尺 v3v4版本变化后方法的变化线性比例尺V3 var linear = d3.scale.linear() .domain([min, max]) ...原创 2019-10-25 17:12:33 · 2820 阅读 · 1 评论