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