d3.js 柱形图文字

2024-09-06

D3.js 完整的柱形图

一个完整的柱形图包含三部分:矩形.文字.坐标轴.制作一个实用的柱形图,内容包括:选择集.数据绑定.比例尺.坐标轴等内容. 1. 添加 SVG 画布 //画布大小 var width = 400; var height = 400; //在 body 里添加一个 SVG 画布 var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height&quo

D3.js(v3)+react 制作一个带坐标与比例尺的柱形图 (V3版本)

现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有数据都是自己定义的假数据,大家参考一下制作方法即可. 首先定义柱形图的数据.绘图区域的宽高.和上下左右的边距: var width = 600; //SVG绘制区域的宽度 var height = 500; //SVG绘制区域的高度 //定义数据 var dataList = [50,43,120,

【 D3.js 入门系列 --- 3 】做一个简单的图表！

前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为可缩放矢量图形(Scalable Vector Graphics),SVG 使用 XML 格式定义图像,不清楚什么是SVG的朋友请先在 w3cschools 学习下,内容很少,很快就能掌握,不需要记住各种标签,只要知道大概是什么就行,用的时候再查. 先看下面的代码: <script src="

【 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 入门学习(一)

一.安装D3.js 1.网络连接 <script src="https://d3js.org/d3.v4.min.js"></script> 2.命令行安装 cnpm || npm install d3 --save => 我采用的是cnpm install d3 --save 3.创建node 服务器 a. cnpm || npm install express --save =>前面教程已经说了express 搭建服务器了.后面

D3.js画思维导图（转）

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

用D3.js画树状图

做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同网上有很多这种数据可视化展示的js控件,我这里选择了D3.js. 首先在html页面需要包含D3的js文件,其次我们需要将数据构造成json格式,然后存入到一个d3.json文件 { "name":"如何学习D3", "children": [ { "name":"预备

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

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

【 D3.js 入门系列 --- 2 】如何使用数据和选择元素

接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p> 定义一个集合set,里面有三个元素: var set = ["I like dog","I like cat","I like snake"]; 要用这三个字符串

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

下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <title>HelloWorld</title> </head> <body> <p>Hello World 1</p> <p>Hello World 2</p> </body> </html> 如果

D3.js 第一个程序 HelloWorld

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

【 D3.js 视频系列】飞速入门

本教程共包含 6 个视频,目的是为了帮助初学者快速入门,以便阅读本站其他文章. 本教程的名称为"飞速入门",是为初学者准备的,其中包括了 D3 开发中最基础的知识.对 D3 掌握得较好的朋友不必观看本教程.本系列的具体内容如下,点击标题即可进入百度云页面观看.如果百度云网盘的在线播放中出现清晰度不足的情况,请下载后再观看. 1. 第一个D3程序 D3的简介和安装.服务器软件的安装.初学者应注意的问题.一个简单的D3程序. 源代码:src.zip 2. 制作柱形图选择集.数据绑定.柱形

【 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 高级系列 — 6.0 】值域和颜色

在[入门 - 第 10 章]作了一张中国地图,其中各省份的颜色值都是随意赋值的.如果要将一些值反映在地图上,可以利用颜色的变化来表示值的变化. 1. 思路例如,有值域的范围为: [10, 500] 现希望10用浅绿表示,500用深绿表示,10到500之间的值用浅绿和深绿之间的颜色表示.显然,此处需要一个函数,传入的参数是10到500之间的值,返回值是浅绿到深绿之间的颜色值. [高级 - 第 5.1 章]介绍的颜色插值函数正好可以派上用场. var palegreen = d3.rgb(66,2

【 D3.js 高级系列 — 3.0 】堆栈图

堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑.智能手机.软件. 2005年,三种产品的利润分别为3000.2000.1100万. 2006年,三种产品的利润分别为1300.4000.1700万. 计算可得,2005年总利润为6100万,2006年为7000万. 如果要将2005年的利润用柱形表示,那么应该画三个矩形,三个矩形堆叠在一起.这时候就

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

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

【 D3.js 高级系列 — 1.1 】封装文本自动换行

在[高级 - 第 1.0 章]中讲解了在 SVG 中如何配合使用 text 和 tspan 来实现换行的功能,本文对此功能进行一下封装,以后就可以直接用了. 1. 引用 js 文件下载地址:multext.js 下载之后,在 <script> 标签里引用: <script src="multext.js" charset="utf-8"></script> 或者直接通过网址引用: <script src="htt

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

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

数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总

习·D3.js 学习资源汇总除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github主页:https://github.com/mbostock/d3/wiki 包括D3简介,案例,教程和公开课,以及之前提到的API参考等. Github教程页面:https://github.com/mbostock/d3/wiki/Tutorials -·-·-·-·-·-其他:-·-·-·-·

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

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

d3.js 柱形图 文字

热门专题

d3.js 柱形图文字