上一节记录没有加上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功能相关推荐

  1. d3.js 教程 模仿echarts柱状图

    由于最近工作不是很忙,隧由把之前的charts项目用d3.js重写的一下,其实d3.js文档很多,但是入门不是很难,可是想真的能做一个完成的,交互良好的图还是要下一番功夫的.今天在echarts找到了 ...

  2. d3.js 教程 模仿echarts折线图

    今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...

  3. 可视化工具D3.js教程 入门 (第十四章)—— 中国地图

    可视化工具D3.js教程 入门 (第十四章)-- 中国地图 代码 <!DOCTYPE html> <html lang="en"><head>& ...

  4. D3.js 教程: 使用 JavaScript 创建可交互的柱状图

    原文链接:D3.js Tutorial: Building Interactive Bar Charts with JavaScript 译者:OFED 最近,我们有幸参与了一个机器学习项目,该项目涉 ...

  5. 数据可视化利器D3.js教程 API

    汇智网 http://xc.hubwiz.com/course/54fd40cfe564e50d50dcf284 D3.js 入门系列 - 选择元素和绑定数据 https://www.cnblogs. ...

  6. 【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能

    [项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能 前言 概述 技术介绍 实现过程 插件安装 引用组件 初始化组件 实现效果 简单理解 使用d3创建一个svg 在svg中提添 ...

  7. 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 ...

  8. D3.js 01绘制BarChart

    转载于B站小魁少爷的D3.js教程 非常不错的教程

  9. 利用d3.js对大数据资料进行可视化分析

    insight-labs · 2013/12/19 18:18 作者: [email protected] [email protected] 0x00 背景 对于前段时间流出的QQ群数据大家想必已经 ...

最新文章

  1. add-apt-repository命令详解_Dcr_Hs的博客-CSDN博客_add-apt-repository
  2. Linux_SquidProxyServer代理服务器
  3. 171. Excel Sheet Column Number
  4. Tomcat原理详解和各种集群的实现
  5. DL之DCGNN:基于TF利用DCGAN实现在MNIST数据集上训练生成新样本
  6. Excel 常用函数 IF 用法
  7. 防SQL注入的最好实现方式是什么?
  8. 微服务系列 —— 一小时搞定Eureka
  9. sql如何在两张表中得到每组数据,并知道数据的个数,举例,判断有多少班级,每个班的人数
  10. 监控提示服务器状态变更,服务器故障排除与状态监控
  11. batchplot插件用法_batchplot插件用法_batchplot批量打印怎么用?Batchplot(CAD批量打印工具)安装步骤...
  12. 跟父亲一样伟大的程序员,请一定要照顾好自己!
  13. 带常数项指数函数的非线性回归方法(python实现)
  14. 浅析游戏音乐的风格特点—欧美风
  15. ggplot2绘制数据分布crossbar图教程
  16. 吴洪声十问易名CEO金小刚:域名还有没有投资价值?
  17. SISD、MIMD、SIMD、MISD系统介绍
  18. 《Android移动应用基础教程》之Android购物商城
  19. 中科院JCR期刊分区微信公众号查询平台升级
  20. 在这几桩大案中,阿里离不开深圳警方......

热门文章

  1. 我用AI回怼美女汽车销售系列[yolo车牌识别](五) 完结
  2. Linux中的动态链接库与静态链接库
  3. 卡尔曼滤波(Calman Filter)基本原理
  4. taskset设置CPU affinity
  5. 31312312312iiiii
  6. fedora在此处打开终端
  7. 分块内存映射处理大文件-例子
  8. gridlayoutmanager 设置间距_不设置主灯的客厅应当如何保证较好的灯光分布?
  9. matlab 图像旋转补色,旋转互补色光学错觉
  10. Unity游戏中的一些规范和优化建议