d3.js饼图添加legend文字标签

2024-11-02

d3.js 教程模仿echarts legend功能

上一节记录没有加上echarts的legend功能,这一小节补一下. 1. 数据我们可以从echarts中看出,折线数据并不是我们传进入的原始数据(多数情况下我们也不会修改原始数据),而是原始数组的一个备份而已.备份数组的方法有很多.这里我是用了ES6的方法. series(series) { if(!arguments.length) return this._series; this._series = series; let maxY = this.selectMaxYNumber(th

js动态添加和删除标签

html代码 <h1>动态添加和删除标签</h1> <div id="addTagTest"> <table> <thead><tr><th>姓名</th><th>年薪</th><th>操作</th></tr></thead> <tbody id="info"> </tbody>

使用js页面添加或删除标签

// 添加var container = document.getElementById('divAudio');container.appendChild(audio); // 删除var container = document.getElementById('divAudio'); if (container.firstChild !== null) { console.log('删除audio元素'); document.getElementById('divAudio').remove

chart.js图表库案例赏析，饼图添加文字

chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于 5KB. 前天用了一下,由于以前也稍微用过,今天总结了一下(水平有限,如果问题,请不吝赐教): 开发中文文档:http://www.bootcss.com/p/chart.js/docs/ ch

Echarts学习记录——如何给x轴文字标签添加事件

Echarts学习记录——如何给x轴文字标签添加事件关键属性 axisLabel下属性clickable:true 并给图表添加单击事件根据返回值判断点击的是哪里感觉自己的方法有点变扭,有更好办法的同学,请留下方式. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-

【 D3.js 入门系列 --- 5.1 】做一个带坐标轴和标签的图表

前面几节讲解了图标.坐标轴.比例等等,这一节整合这些内容做一个实用的图表.结果图如下: 代码如下所示: <html> <head> <meta charset="utf-8"> <title>Chart</title> </head> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdge

js里添加的标签

js里添加的标签.网页加载此标签绑定的js函数时,由于没有标签,故无法执行函数. 例如: js中添加了一个button: html1 += "<td><button type=\"button\" class=\"btn btn-success\" id=\"startvip\" data-key=" + obj.UserId + " >开通</button>" + &q

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使用过程中的常见问题(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调用地图api 进行数据可视化

前段时间自己研究了demo就是把某个区域的某个位置通过经纬度在地图上可视化.其实就是使用了第三方插件,比现在比较火的可视化插件d3.js echart.js.大致思路就是,把要用到的位置的geojson数据报错,然后本地调用这些数据,通过d3.js或者echart.js通过地图中的api把他显示到页面上,这样可以更直观更方便的进行预览,也就是现在比较火的数据可视化,也是未来前端发展的一个不错的方向.由于第一次做所以有些需要优化的地方自己可以根据需求优化.代码如下: html: <!DOCTYPE

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

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

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

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

【 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 进阶系列 — 6.2 】饼状图的拖拽

本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有趣的. 1.饼状图的绘制与[入门 - 第 9.1 章]稍有有些不同,我们对饼状图的每一个区域都使用一个 g 标签将其包围起来,以便平移操作. var gAll = svg.append("g") .attr("transform","translate(&q

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

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

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系列——初步使用、选择元素与绑定数据

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

d3.js封装文本实现自动换行和旋转平移等功能

我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧. 一.引用 multext.js 文件 multext.js function appendMultiText(container, str, posX, posY, width, fontsize, fontfamily){ if( arguments.length < 6){ fontsize = 14; } if( arguments.length < 7){ fontfamily = &q

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

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

D3.js学习（七）

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

d3.js饼图添加legend文字标签

热门专题