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

最新推荐文章于 2024-06-19 14:15:00 发布

张小浪

最新推荐文章于 2024-06-19 14:15:00 发布

阅读量209

点赞数

文章标签： vue.js javascript 前端

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

版权

文章介绍了如何在Pie3D组件中通过配置项sfShowLabel来显示文本标签和引导线。使用d3.js库，对数据集dataset进行操作，创建线段表示引导线，并定位文本，以展示饼图各部分的标签信息，包括值和描述。

摘要由CSDN通过智能技术生成

一、文本标线的实现

效果图如下

注意这里在Pie3D.vue文件中加了一个sfShowLabel的配置项

在pie.js中添加如下代码

//是否显示标签
        if(config.sfShowLabel){
            //创建文本标签引导线
            const line = d3.select('#pie_chart')
                .append('g')
                .attr('transform',`translate(350,200)`)
                .attr('class','line');
            //引导线
            line.selectAll('.line')
                .data(dataset)
                .enter()
                .append('line')
                .attr('stroke',(d,index) => {
                    let colorIndex = index % config.color.length
                    return config.color[colorIndex]
                })
                .attr('x1',0)
                .attr('y1',0)
                .attr('x2',d => {
                    return 1.5 * rx * Math.cos(0.5 * (d.startAngle + d.endAngle))
                })
                .attr('y2',d => {
                    return 1.5 * ry * Math.sin(0.5 * (d.startAngle + d.endAngle))
                })
                .style('visibility', d => {
                    return 'visible'
                });
            //文本
            const textbox = d3.select('#pie_chart')
                .append('g')
                .attr('transform','translate(350,200)')
                .attr('class','textbox');
            const text = textbox.selectAll('desc')
                .data(dataset)
                .enter()
                .append('text')
                .attr('font-size','14px')
                .attr('text-anchor','middle')
                .style('visibility', d => {
                    return 'visible'
                })
                .attr('fill',(d,index) => {
                    let colorIndex = index % config.color.length
                    return config.color[colorIndex]
                })
                .text(d => {
                    return `${d.data.label}:${d.data.value}${d.data.DWMC}`
                })
                .attr('transform', d => {
                    let x = 1.5 * (rx + 10) * Math.cos(0.5 * (d.startAngle + d.endAngle))
                    let y = 1.5 * (ry + 10) * Math.sin(0.5 * (d.startAngle + d.endAngle))
                    return `translate(${x},${y})`
                })

        }