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

?

?

?