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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248156.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序2-基本架构讲解(一)WXSS样式

项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件.wxml 后缀的 WXML 模板文件.wxss 后缀的 WXSS 样式文件.js 后缀的 JS 脚本逻辑文件WXSS 样式 WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。WXSS 具有 CSS 大部分的特性 新增了尺…

js高级—tab栏切换(面向对象做法)

<main><h4>Js 面向对象 动态添加标签页</h4><div class"tabsbox" id"tab"><!-- tab 标签 --><nav class"fisrstnav"><ul><li class"liactive"><span>测试1</span><sp…

MFC的sendmessage和postmessage 以及sendmessagetimeout

PostMessage只负责将消息放到消息队列中&#xff0c;不确定何时及是否处理&#xff0c;相当于异步操作&#xff0c;执行后马上返回SendMessage要等到受到消息处理的返回码&#xff08;DWord类型&#xff09;后才继续&#xff0c;相当于同步操作&#xff0c;一直在等待&#xff…

python PIL图像处理-框选

框选图中位置 代码 from PIL import Image,ImageDraw,ImageFont,ImageFilter import random#------------------------------------- #filepath,[837,103][942,208]#图片处理&#xff0c;框选 def pic_rectangle(filepath,bound):image Image.open(filepath)draw ImageDraw.D…

Win10卸载python总是提示error2503失败各种解决办法

最近win10的电脑装了python的3.4&#xff0c;然后想卸载&#xff0c;就总是提示error 2053&#xff0c;类似于这种&#xff1a; 下面是我的坎坷解决之路&#xff1a; 1、网上说&#xff0c;任务管理器 --> 详细信息 --> explorer.exe结束任务&#xff0c;结束资源管理器&…

js高级—查询商品案例

<div class"search">按照价格查询&#xff1a;<input type"text" class"start"> - <input type"text" class"end"><button class"search-price">搜索</button> 按照商品名称查询&a…

[Codeforces702F]T-Shirts——非旋转treap+贪心

题目链接&#xff1a; Codeforces702F 题目大意&#xff1a;有$n$种T恤&#xff0c;每种有一个价格$c_{i}$和品质$q_{i}$且每种数量无限。现在有$m$个人&#xff0c;第$i$个人有$v_{i}$元&#xff0c;每人每次会买他能买得起的品质最高的一件T恤(当两件T恤品质相同时优先买价格…

js高级第二天

构造函数和原型 构造函数和原型 在典型的OOP 的语言中&#xff08;如Java&#xff09;&#xff0c;都存在类的概念&#xff0c;类就是对象的模板&#xff0c;对象就是类的实例&#xff0c;但在ES6之前&#xff0c;JS 中并没用引入类的概念。ES6&#xff0c;全称ECMAScript6.0…

操作系统原理之文件系统(第五章)

一、文件 1、⽂件系统的⽤户接⼝包括⽂件的命名、类型、属性和对⽂件的操作 2、⽂件命名&#xff1a;所有操作系统都允许⽤1&#xff5e;8个字⺟组成的字符串 3、⽂件扩展名&#xff1a;多数操作系统都⽀持⽂件名⽤圆点隔开分为两部分&#xff0c;圆点后⾯的部分称为⽂件扩展名…

第三次作业------52李金镇

---恢复内容开始--- 习题1&#xff1a; **1.初始化一个数据集&#xff0c;包括5-10位同学的成绩数据&#xff08;数据类型不限&#xff09;&#xff0c;数据格式如下&#xff1a; **学号 姓名 Java C语言 Python2017XXXX 小白 87 68 922017XXXX 小黄 80 76 832017XXXX 小王 75 …

js高级第三天

原型链 作用&#xff1a;提供一个成员的查找机制&#xff0c;或者查找规则含义&#xff1a;由原型所串联起来的链装结构JavaScript 的成员查找机制(规则) 当访问一个对象的属性&#xff08;包括方法&#xff09;时&#xff0c;首先查找这个对象自身有没有该属性。如果没有就查…

为什么大学的计算机老师技术那么厉害,却不愿意当程序员?

不知道大家有多少是从事跟计算机有关的工作的&#xff0c;每次想到大学时的计算机考试&#xff0c;都能令小小编心惊胆战呀&#xff0c;各式代码和计算机语言&#xff0c;真的是很令人头痛了。不过呢&#xff0c;也有很多大神&#xff0c;大学学着其他的专业&#xff0c;却在毕…

DDG全家桶之3022

本篇文章主要根据360Netlab新出的DDG分析文档来复现新变种3022&#xff0c;会涉及部分分析和清除的方法&#xff0c;本篇文章只用于学习交流&#xff0c;为广大受害者提供清除思路 &#xff0c;请勿用于非法用途&#xff0c;产生一切后果与作者无关 详情请参考文档&#xff1a;…

js高级第四天

课程回顾&#xff1a; ​ 原型链&#xff1a;由原型构成链状结构&#xff0c;提供成员查找机制 ​ 继承&#xff1a;组合继承&#xff1a;构造函数和原型对象 ​ 属性&#xff1a;调用父构造函数的时候用call改变this指向 ​ 方法&#xff1a;父实例对象赋值给子原型对象&a…

d3.js 制作简单的俄罗斯方块

d3.js是一个不错的可视化框架&#xff0c;同时对于操作dom也是十分方便的。今天我们使用d3.js配合es6的类来制作一个童年小游戏--俄罗斯方块。话不多说先上图片。 1. js tetris类 由于方法拆分的比较细所以加上了一些备注&#xff08;这不是我的风格&#xff01;&#xff09; c…

Flask中路由系统以及蓝图的使用

一、Flask的路由系统 1.app.route()装饰器中的参数 methods:当前URL地址&#xff0c;允许访问的请求方式 app.route("/info", methods["GET", "POST"]) def student_info():stu_id int(request.args["id"])return f"Hello Old b…

js高级第五天

课程回顾&#xff1a; ​ 原型链&#xff1a;由原型构成链状结构&#xff0c;提供成员查找机制 ​ 继承&#xff1a;组合继承&#xff1a;构造函数和原型对象 ​ 属性&#xff1a;调用父构造函数的时候用call改变this指向 ​ 方法&#xff1a;父实例对象赋值给子原型对象&a…

d3.js 制作简单的贪吃蛇

d3.js是一个不错的可视化框架&#xff0c;同时对于操作dom也是十分方便的。今天我们使用d3.js配合es6的类来制作一个童年小游戏–贪吃蛇。话不多说先上图片。 1. js snaker类 class Snaker {constructor() {this._size 30;this._len 3;this._width 900;this._height 690;th…

js高级第六天

Q课程回顾&#xff1a; ​ 闭包&#xff1a;有权访问另外一个函数的局部变量的函数&#xff0c;作用&#xff1a;延伸变量使用范围 ​ mdn&#xff0c;w3c function fn1 () {var n 3;return function () {console.log(n);} }​ 递归&#xff1a;函数调用其本身 function f…

Chrome 75 lazy-loading

Chrome 75 & lazy-loading https://addyosmani.com/blog/lazy-loading/ https://chromestatus.com/feature/5645767347798016 Chrome 75 将默认启用延迟加载功能 自 Chrome 75 起&#xff0c;将原生支持图片的延迟加载&#xff0c;在代码中编写 <img loading"lazy&…