mirror of
https://github.com/TBEDP/datavjs.git
synced 2026-02-01 16:06:25 +00:00
fix text overrlaps
This commit is contained in:
xie cong
parent
4d094673e7
commit
b1ed29398b
@ -200,9 +200,9 @@
|
||||
x: conf.radius * Math.cos(angle) + namePos.x,
|
||||
y: conf.radius * Math.sin(angle) + namePos.y
|
||||
};
|
||||
var linePos = {
|
||||
x: 9 * Math.cos(angle),
|
||||
y: 9 * Math.sin(angle)
|
||||
var offSetPos = {
|
||||
x: this.data('nameTag').getBBox().width / 2 * Math.cos(angle),
|
||||
y: this.data('nameTag').getBBox().height / 2 * Math.sin(angle)
|
||||
};
|
||||
if (flag) {
|
||||
if (that.click === 0) {
|
||||
@ -216,11 +216,17 @@
|
||||
this.attr('fill-opacity', 1);
|
||||
if (conf.showText) {
|
||||
this.data('nameTag').stop().animate({
|
||||
transform: "t" + (center.x + radius.x + 2 * namePos.x) + " " + (center.y + radius.y + 2 * namePos.y) + "r" + ro
|
||||
transform: "t" + (center.x + radius.x + 2 * namePos.x + offSetPos.x) + " " + (center.y + radius.y + 2 * namePos.y + offSetPos.y)
|
||||
}, conf.ms, conf.easing);
|
||||
|
||||
this.data('line').stop().animate({
|
||||
transform: "t" + (center.x + radius.x + namePos.x - linePos.x) + " " + (center.y + radius.y + namePos.y - linePos.y) + "r" + ro
|
||||
transform: "t" + (center.x + radius.x + namePos.x) + " " + (center.y + radius.y + namePos.y) + "r" + ro
|
||||
}, conf.ms, conf.easing);
|
||||
|
||||
if (!this.data('hiddenTag')) {
|
||||
this.data('nameTag').show();
|
||||
this.data('line').show();
|
||||
}
|
||||
}
|
||||
this.stop().animate({
|
||||
transform: "t" + (center.x + namePos.x) + " " + (center.y + namePos.y)
|
||||
@ -230,11 +236,16 @@
|
||||
} else {
|
||||
if (conf.showText) {
|
||||
this.data('nameTag').stop().animate({
|
||||
transform: "t" + (center.x + radius.x + namePos.x) + " " + (center.y + radius.y + namePos.y) + "r" + ro
|
||||
transform: "t" + (center.x + radius.x + namePos.x + offSetPos.x) + " " + (center.y + radius.y + namePos.y + offSetPos.y)
|
||||
}, conf.ms, conf.easing);
|
||||
this.data('line').stop().animate({
|
||||
transform: "t" + (center.x + radius.x - linePos.x) + " " + (center.y + radius.y - linePos.y) + "r" + ro
|
||||
transform: "t" + (center.x + radius.x) + " " + (center.y + radius.y) + "r" + ro
|
||||
}, conf.ms, conf.easing);
|
||||
|
||||
if (!this.data('hiddenTag')) {
|
||||
this.data('nameTag').hide();
|
||||
this.data('line').hide();
|
||||
}
|
||||
}
|
||||
this.stop().animate({
|
||||
transform: "t" + center.x + " " + center.y
|
||||
@ -276,18 +287,38 @@
|
||||
//每个donut上显示名称
|
||||
ro = (fan.startAngle + fan.endAngle) * 90 / Math.PI;
|
||||
angle = 0.5 * ((fan.startAngle + fan.endAngle) - Math.PI);
|
||||
nameX = (conf.radius + 2 * conf.protrude) * Math.cos(angle);
|
||||
nameY = (conf.radius + 2 * conf.protrude) * Math.sin(angle);
|
||||
nameStr = "T" + ((conf.width - that.xOffset) / 2 + that.xOffset) + "," + conf.height / 2 + "R" + ro + "T" + nameX + "," + nameY;
|
||||
|
||||
if (conf.showText) {
|
||||
var line = that.canvas.path("M,0,-" + conf.protrude + "L0," + conf.protrude).transform(nameStr).translate(0, conf.protrude + 9);
|
||||
nameX = (conf.radius + 2 * conf.protrude) * Math.cos(angle);
|
||||
nameY = (conf.radius + 2 * conf.protrude) * Math.sin(angle);
|
||||
nameStr = "T" + ((conf.width - that.xOffset) / 2 + that.xOffset) + "," + conf.height / 2 + "R" + ro + "T" + nameX + "," + nameY;
|
||||
|
||||
var line = that.canvas.path("M,0,-" + conf.protrude + "L0," + conf.protrude).transform(nameStr).translate(0, conf.protrude);
|
||||
var nameTag = that.canvas.text().attr({
|
||||
"font": "18px Verdana",
|
||||
"text": fan.nameTag
|
||||
}).translate(((conf.width - that.xOffset) / 2 + that.xOffset) + nameX, conf.height / 2 + nameY);//.rotate(ro); //transform(nameStr);
|
||||
})
|
||||
var offSetPos = {
|
||||
x: nameTag.getBBox().width / 2 * Math.cos(angle),
|
||||
y: nameTag.getBBox().height / 2 * Math.sin(angle)
|
||||
};
|
||||
nameTag.translate(((conf.width - that.xOffset) / 2 + that.xOffset) + nameX + offSetPos.x, conf.height / 2 + nameY + offSetPos.y);
|
||||
donutEle.data('hiddenTag', true);
|
||||
if (i > 0) {
|
||||
var fanPrev = groups[i - 1];
|
||||
var angleBet = angle - 0.5 * ((fanPrev.startAngle + fanPrev.endAngle) - Math.PI);
|
||||
if (that.donutGroups[i - 1].data('hiddenTag')) {
|
||||
if (Math.tan(angleBet / 2) * conf.radius * 4 < (that.donutGroups[i - 1].data('nameTag').getBBox().width + nameTag.getBBox().width)) {
|
||||
donutEle.data('hiddenTag', false);
|
||||
nameTag.hide();
|
||||
line.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
donutEle.data('nameTag', nameTag).data('line', line);
|
||||
}
|
||||
|
||||
|
||||
that.donutGroups.push(donutEle);
|
||||
}
|
||||
|
||||
@ -353,7 +384,7 @@
|
||||
underBn[i].hide();
|
||||
}
|
||||
}).click(function () {
|
||||
var ro = (fan.startAngle + fan.endAngle) * 90 / Math.PI;
|
||||
var ro = (fan.startAngle + fan.endAngle) * 90 / Math.PI;
|
||||
var angle = 0.5 * ((fan.startAngle + fan.endAngle) - Math.PI);
|
||||
var center = {
|
||||
x: ((conf.width - that.xOffset) / 2 + that.xOffset),
|
||||
@ -367,11 +398,11 @@
|
||||
x: conf.radius * Math.cos(angle) + namePos.x,
|
||||
y: conf.radius * Math.sin(angle) + namePos.y
|
||||
};
|
||||
var linePos = {
|
||||
x: 9 * Math.cos(angle),
|
||||
y: 9 * Math.sin(angle)
|
||||
};
|
||||
var donut = that.donutGroups[i];
|
||||
var offSetPos = {
|
||||
x: donut.data('nameTag').getBBox().width / 2 * Math.cos(angle),
|
||||
y: donut.data('nameTag').getBBox().height / 2 * Math.sin(angle)
|
||||
};
|
||||
if (!donut.data("click")) {
|
||||
if (that.click === 0) {
|
||||
that.donutGroups.forEach(function (d) {
|
||||
@ -384,11 +415,16 @@
|
||||
donut.data("click", true).attr('fill-opacity', 1);
|
||||
if (conf.showText) {
|
||||
donut.data('nameTag').stop().animate({
|
||||
transform: "t" + (center.x + radius.x + 2 * namePos.x) + " " + (center.y + radius.y + 2 * namePos.y) + "r" + ro
|
||||
transform: "t" + (center.x + radius.x + 2 * namePos.x + offSetPos.x) + " " + (center.y + radius.y + 2 * namePos.y + offSetPos.y)
|
||||
}, conf.ms, conf.easing);
|
||||
donut.data('line').stop().animate({
|
||||
transform: "t" + (center.x + radius.x + namePos.x - linePos.x) + " " + (center.y + radius.y + namePos.y - linePos.y) + "r" + ro
|
||||
transform: "t" + (center.x + radius.x + namePos.x) + " " + (center.y + radius.y + namePos.y) + "r" + ro
|
||||
}, conf.ms, conf.easing);
|
||||
|
||||
if (!donut.data('hiddenTag')) {
|
||||
donut.data('nameTag').show();
|
||||
donut.data('line').show();
|
||||
}
|
||||
}
|
||||
donut.stop().animate({
|
||||
transform: "t" + (center.x + namePos.x) + " " + (center.y + namePos.y)
|
||||
@ -397,11 +433,16 @@
|
||||
} else {
|
||||
if (conf.showText) {
|
||||
donut.data('nameTag').stop().animate({
|
||||
transform: "t" + (center.x + radius.x + namePos.x) + " " + (center.y + radius.y + namePos.y) + "r" + ro
|
||||
transform: "t" + (center.x + radius.x + namePos.x + offSetPos.x) + " " + (center.y + radius.y + namePos.y + offSetPos.y)
|
||||
}, conf.ms, conf.easing);
|
||||
donut.data('line').stop().animate({
|
||||
transform: "t" + (center.x + radius.x - linePos.x) + " " + (center.y + radius.y - linePos.y) + "r" + ro
|
||||
transform: "t" + (center.x + radius.x) + " " + (center.y + radius.y) + "r" + ro
|
||||
}, conf.ms, conf.easing);
|
||||
|
||||
if (!donut.data('hiddenTag')) {
|
||||
donut.data('nameTag').hide();
|
||||
donut.data('line').hide();
|
||||
}
|
||||
}
|
||||
donut.stop().animate({
|
||||
transform: "t" + center.x + " " + center.y
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user