上一節(jié)記錄沒有加上echarts的legend功能，這一小節(jié)補(bǔ)一下。

1. 數(shù)據(jù)

我們可以從echarts中看出，折線數(shù)據(jù)并不是我們傳進(jìn)入的原始數(shù)據(jù)（多數(shù)情況下我們也不會修改原始數(shù)據(jù)），而是原始數(shù)組的一個備份而已。備份數(shù)組的方法有很多。這里我是用了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就是原始數(shù)組，this._series就是備份
this._series = this._dataY.map(d => d)

2.渲染上部分legend

如圖

首先上面有很多相同的圖形標(biāo)志，我們像定義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')}

這里是應(yīng)用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. 點(diǎn)擊相應(yīng)legend重新篩選數(shù)據(jù)渲染

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();})

主要的代碼差不多就是這些，
想預(yù)覽或者下載代碼的朋友們可以來到原文下載！

原文地址?http://www.bettersmile.cn

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/vadim-web/p/11466054.html

總結(jié)

以上是生活随笔為你收集整理的d3.js 教程 模仿echarts legend功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。