vue项目基于D3js的3D饼图实现（四）

最新推荐文章于 2024-07-25 09:37:37 发布

张小浪

最新推荐文章于 2024-07-25 09:37:37 发布

阅读量255

点赞数

文章标签： vue.js 3d javascript

本文链接：https://blog.csdn.net/qq_40011214/article/details/130563592

版权

横向图例翻页的实现，效果图如下

一、修改Pie3D.vue文件，新增config配置

二、修改pie.js文件中的翻页图例配置

if(config.legendType === 'scroll'){
                legendSvg.attr('width',700 - 80);
                    //计算每一个图例的距离
                    let list = []
                    let left = 0
                    legend.each(function(){
                        left += d3.select(this).node().getBBox().width + 10
                        list.push(left)
                    })
                    legend.attr('transform',function(d, i){
                        if(i === 0){
                            return 'translate(0,0)'
                        }else {
                            return `translate(${list[i - 1]},0)`
                        }
                    })
                    //图例宽度大于盒子宽度
                    if(legendSvg.node().getBBox().width > (700 - 80)){
                        //获取总页数
                        let legendNumLength = 0
                        let totalPage = 1 //总页数
                        let curPage = 1 //翻页定义当前页数
                        let transitionX = 0 //需要移动图例整体所占的距离
                        let lineList = [] //如果是普通图例判断一行显示多少个
                        legend.each(function(d,i){
                            legendNumLength += d3.select(this).node().getBBox().width + 10
                            if(legendNumLength > (700 - 80 - (d3.select(this).node().getBBox().width + 10))){
                                legendNumLength = 0
                                //避免移动到最后一页多加一夜
                                if(data.length - 1 !== i){
                                    lineList.push(i)
                                    totalPage++
                                }
                            }
                        })
                        //定义横向翻页的svg
                        const legendPageSvg = d3.select(id)
                            .append('svg')
                            .attr('width',100)
                            .attr('height',20)
                            .style('position','absolute')
                            .style('top',400 - 30)
                            .style('left',700 - 80);
                        let sym = d3.symbol().type(d3.symbolTriangle).size(100);

                        const pageBox = legendPageSvg.append('g')
                            .attr('id','legend_page')
                            .attr('transform','translate(15,8)');

                            //定义左侧翻页符号
                        pageBox.append('path')
                            .attr('d',sym)
                            .attr('fill','green')
                            .attr('transform','rotate(30)')
                            .style('cursor','pointer')
                            .on('click',function(){
                                if(curPage > 1){
                                    let legendNumLength = 0
                                    let curLength = 0
                                    legend.each(function(d,i){
                                        legendNumLength += d3.select(this).node().getBBox().width + 10
                                        if(legendNumLength <= 700 - 80){
                                            curLength = legendNumLength
                                        }
                                    })
                                    transitionX -= curLength
                                    legendBox.transition()
                                        .duration(500)
                                        .attr('transform',`translate(-${transitionX}, 0)`);
                                    curPage--
                                    legendText.text(`${curPage}/${totalPage}`)
                                }
                            });
                        //页码
                        const legendText = pageBox.append('text')
                            .text(`${curPage}/${totalPage}`)
                            .attr('fill','red')
                            .attr('font-size',12)
                            .attr('transform','translate(10,5)');
                        //右侧翻页按钮
                        pageBox.append('path')
                            .attr('d',sym)
                            .attr('fill','green')
                            .attr('transform','translate(40,0) rotate(-30)')
                            .style('cursor','pointer')
                            .on('click',function(){
                                if(curPage < totalPage){
                                    let legendNumLength = 0
                                    let curLength = 0
                                    legend.each(function(d,i){
                                        legendNumLength += d3.select(this).node().getBBox().width + 10
                                        if(legendNumLength <= 700 - 80){
                                            curLength = legendNumLength
                                        }
                                    });
                                    transitionX += curLength
                                    legendBox.transition()
                                        .duration(500)
                                        .attr('transform',`translate(-${transitionX}, 0)`);
                                    curPage++
                                    legendText.text(`${curPage}/${totalPage}`)
                                }
                            });
                    }
            }