fix : pieD3 鼠标移入,放大
This commit is contained in:
@@ -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)) {
|
||||
|
||||
Reference in New Issue
Block a user