d3.js 教程 模仿echarts legend功能
上一节记录没有加上echarts的legend功能,这一小节补一下。
1. 数据
我们可以从echarts中看出,折线数据并不是我们传进入的原始数据(多数情况下我们也不会修改原始数据),而是原始数组的一个备份而已。备份数组的方法有很多。这里我是用了ES6的方法。
series(series) {if(!arguments.length) return this._series;this._series = series;let maxY = this.selectMaxYNumber(this._series);this.scaleY([0, maxY])return this; } dataY(data) {if(!arguments.length) return this._dataY;this._dataY = data;this.series(this._dataY.map(d => d));return this; }
这里的this._dataY就是原始数组,this._series就是备份
this._series = this._dataY.map(d => d)
2.渲染上部分legend
如图
首先上面有很多相同的图形标志,我们像定义clipPath一样定义这些图形,然后通过use去引用他们,接着去渲染上面的承装legend的容器
initGraph() {let graph = this._svg.append('defs').append('g').attr('id', 'graph')graph.append('line').attr('x1', 0).attr('y1', 0).attr('x2', 30).attr('y2', 0).style('stroke', 'inherit')graph.append('circle').attr('cx', 15).attr('cy', 0).attr('r', 6.5).attr('stroke', 'inherit').attr('fill', '#fff')this._graphGroup = this._svg.append('g').attr('class', 'graphGroup')}
这里是应用use的代码
let ele = this._graphGroup.selectAll('g.graph-item').data(this._dataY);let ent = ele.enter().append('g').attr('class', 'graph-item')ent.append('use').attr('x', (d,i) => i * 150 + 100).attr('y', 20).attr('xlink:href', '#graph').attr('stroke', (d,i) => this._color(i)).style('cursor', 'pointer')ent.append('text').attr('x', (d,i) => i * 150 + 132).attr('y', 20).attr('dy', '.4em').attr('fill', '#444').style('font-size', '13px').style('cursor', 'pointer').text(d => d.name)
3. 点击相应legend重新筛选数据渲染
ent.append('text').attr('x', (d,i) => i * 150 + 132).attr('y', 20).attr('dy', '.4em').attr('fill', '#444').style('font-size', '13px').style('cursor', 'pointer').text(d => d.name).on('click', item => {let index = this._series.map(d => d.name).indexOf(item.name);if(this._series[index]['data'].length == 0) {this.series(this._series.map((d,i) => {if(i == index) {return this._dataY[index]} else {return d;}}))} else {this.series(this._series.map((d,i) => {if(i == index) {return {name: d.name,data: []}} else {return d}}))}this.render();})
主要的代码差不多就是这些,
想预览或者下载代码的朋友们可以来到原文下载!
原文地址 http://www.bettersmile.cn
转载于:https://www.cnblogs.com/vadim-web/p/11466054.html
d3.js 教程 模仿echarts legend功能相关推荐
- d3.js 教程 模仿echarts柱状图
由于最近工作不是很忙,隧由把之前的charts项目用d3.js重写的一下,其实d3.js文档很多,但是入门不是很难,可是想真的能做一个完成的,交互良好的图还是要下一番功夫的.今天在echarts找到了 ...
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
- 可视化工具D3.js教程 入门 (第十四章)—— 中国地图
可视化工具D3.js教程 入门 (第十四章)-- 中国地图 代码 <!DOCTYPE html> <html lang="en"><head>& ...
- D3.js 教程: 使用 JavaScript 创建可交互的柱状图
原文链接:D3.js Tutorial: Building Interactive Bar Charts with JavaScript 译者:OFED 最近,我们有幸参与了一个机器学习项目,该项目涉 ...
- 数据可视化利器D3.js教程 API
汇智网 http://xc.hubwiz.com/course/54fd40cfe564e50d50dcf284 D3.js 入门系列 - 选择元素和绑定数据 https://www.cnblogs. ...
- 【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能 前言 概述 技术介绍 实现过程 插件安装 引用组件 初始化组件 实现效果 简单理解 使用d3创建一个svg 在svg中提添 ...
- js/d3.min.js_在5分钟内学习D3.js
js/d3.min.js by Sohaib Nehal 通过Sohaib Nehal 在5分钟内学习D3.js (Learn D3.js in 5 minutes) 创建数据可视表示的简介 (An ...
- D3.js 01绘制BarChart
转载于B站小魁少爷的D3.js教程 非常不错的教程
- 利用d3.js对大数据资料进行可视化分析
insight-labs · 2013/12/19 18:18 作者: [email protected] [email protected] 0x00 背景 对于前段时间流出的QQ群数据大家想必已经 ...
最新文章
- add-apt-repository命令详解_Dcr_Hs的博客-CSDN博客_add-apt-repository
- Linux_SquidProxyServer代理服务器
- 171. Excel Sheet Column Number
- Tomcat原理详解和各种集群的实现
- DL之DCGNN:基于TF利用DCGAN实现在MNIST数据集上训练生成新样本
- Excel 常用函数 IF 用法
- 防SQL注入的最好实现方式是什么?
- 微服务系列 —— 一小时搞定Eureka
- sql如何在两张表中得到每组数据,并知道数据的个数,举例,判断有多少班级,每个班的人数
- 监控提示服务器状态变更,服务器故障排除与状态监控
- batchplot插件用法_batchplot插件用法_batchplot批量打印怎么用?Batchplot(CAD批量打印工具)安装步骤...
- 跟父亲一样伟大的程序员,请一定要照顾好自己!
- 带常数项指数函数的非线性回归方法(python实现)
- 浅析游戏音乐的风格特点—欧美风
- ggplot2绘制数据分布crossbar图教程
- 吴洪声十问易名CEO金小刚:域名还有没有投资价值?
- SISD、MIMD、SIMD、MISD系统介绍
- 《Android移动应用基础教程》之Android购物商城
- 中科院JCR期刊分区微信公众号查询平台升级
- 在这几桩大案中,阿里离不开深圳警方......