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