fix : pieD3 鼠标移入,放大

This commit is contained in:
likexuan
2022-10-28 09:21:20 +08:00
parent 7127de2e10
commit f3983ff59a

View File

@@ -65,6 +65,7 @@ export default {
height: 0,
innerRadius: 0,
outerRadius: 0,
textSize: 0,
tooltip: {
x: 0,
y: 0,
@@ -178,6 +179,7 @@ export default {
}
// 半径
this.outerRadius = Math.min(this.width, this.height) / 3
this.textSize = Math.ceil(this.outerRadius / 18) > 30 ? 30 : Math.ceil(this.outerRadius / 18)
// 画布
const svg = d3
.select(`#chart-canvas-${this.chartId}`)
@@ -219,7 +221,15 @@ export default {
return d.data.color
}
})
const _this = this
arcs.on('mouseover', function (d) {
d3.select(this).select('path').transition().attr('transform', 'scale(1.1)')
d3.select(this).select('foreignObject').style('font-size', _this.textSize * 1.1)
})
arcs.on('mouseout', function (d) {
d3.select(this).select('path').transition().attr('transform', 'scale(1)')
d3.select(this).select('foreignObject').style('font-size', _this.textSize)
})
/* 添加文字信息 */
arcs.append('foreignObject')
.attr('width', (d, i) => {
@@ -255,13 +265,7 @@ export default {
return 'translate(' + (arc.centroid(d)[0] - (Math.abs(d.endAngle - d.startAngle) / 3.14 * this.outerRadius / 2)) + ',' + (arc.centroid(d)[1] - (Math.abs(d.endAngle - d.startAngle) / 3.14 * this.outerRadius / 2)) + ')'
}
})
.style('font-size', (i) => {
if (Math.ceil(this.outerRadius / 18) > 30) {
return 30
} else {
return Math.ceil(this.outerRadius / 18)
}
})
.style('font-size', this.textSize)
.style('line-height', '16px')
.html((d) => {
if ((d.endAngle - d.startAngle) < 0.5 && Math.ceil(this.outerRadius / 18 < 30)) {