From 4091e6dc7505c49bdcb92c09b4b2182ff54d8474 Mon Sep 17 00:00:00 2001 From: Jackson Tian Date: Wed, 12 Dec 2012 00:07:39 +0800 Subject: [PATCH] Fix the tip bug --- lib/charts/bubble.js | 112 +++++++++++++++++++++---------------------- 1 file changed, 56 insertions(+), 56 deletions(-) diff --git a/lib/charts/bubble.js b/lib/charts/bubble.js index bb83b6d..c14c893 100644 --- a/lib/charts/bubble.js +++ b/lib/charts/bubble.js @@ -63,7 +63,16 @@ "margin": "auto", "color": "#ffffff" }; - this.formatter.tipFormat = function (key, index) { + + /** + * @param {String} key 关键字 + * @param {Number} x0 横轴值 + * @param {Number} y0 纵轴值 + * @param {Number} r0 半径值 + * @param {Number} c0 分组值 + * @param {String} time 时间值 + */ + this.formatter.tipFormat = function (key, x0, y0, r0, c0, time) { var tpl = '' + this.keyDimen + ':{key}
' + '' + this.xDimen + ':{xDimen}
' + '' + this.yDimen + ':{yDimen}
' + @@ -71,19 +80,12 @@ '' + this.colorDimen + ':{colorDimen}
' + '' + this.timeDimen + ':{timeDimen}'; - var timeKeys = this.timeKeys; - var value = timeKeys[index]; - var x0 = this.interpolateData(value, timeKeys, this.getKeyData(this.xDimen, key)), - y0 = this.interpolateData(value, timeKeys, this.getKeyData(this.yDimen, key)), - r0 = this.interpolateData(value, timeKeys, this.getKeyData(this.sizeDimen, key)), - c0 = this.getColorData(key); - var tip = tpl.replace('{key}', key); tip = tip.replace('{xDimen}', x0); tip = tip.replace('{yDimen}', y0); tip = tip.replace('{sizeDimen}', r0); tip = tip.replace('{colorDimen}', c0); - tip = tip.replace('{timeDimen}', this.times[value]); + tip = tip.replace('{timeDimen}', time); return tip; }; @@ -92,6 +94,17 @@ } }); + Bubble.prototype.getTip = function (key, index) { + var timeKeys = this.timeKeys; + var value = timeKeys[index]; + var x = this.interpolateData(value, timeKeys, this.getKeyData(this.xDimen, key)), + y = this.interpolateData(value, timeKeys, this.getKeyData(this.yDimen, key)), + size = this.interpolateData(value, timeKeys, this.getKeyData(this.sizeDimen, key)), + color = this.getColorData(key); + var formatter = this.getFormatter("tipFormat"); + return formatter.call(this, key, x, y, size, color, this.times[value]); + }; + /** * Creates a backCanvas for the visualization */ @@ -251,7 +264,6 @@ // add interaction for colorbar this.interactionType = null; - that = this; rectBn.forEach(function (d) { d.hover(function () { if (!that.interval) { @@ -480,7 +492,6 @@ dotBubbleSet = []; var that = this; - var tipFormat = that.getFormatter("tipFormat"); if (time < this.times.length - 1) { this.startTime = time; } else { @@ -515,12 +526,6 @@ } var floatTag = this.floatTag; - var tpl = '' + that.keyDimen + ':{key}
' + - that.xDimen + ':{xDimen}
' + - that.yDimen + ':{yDimen}
' + - that.sizeDimen + ':{sizeDimen}
' + - that.colorDimen + ':{colorDimen}
' + - that.timeDimen + ':{timeDimen}'; // control the time label var label = foreCanvas.text(20, margin[0] + realHeight + 15, this.times[time.toFixed(0)]); @@ -543,46 +548,41 @@ // add hover and click effect for all circles dotBubbleSet.forEach(function (d, i) { - var tip = tpl.replace('{key}', dots[i].key); - tip = tip.replace('{xDimen}', dots[i].x0); - tip = tip.replace('{yDimen}', dots[i].y0); - tip = tip.replace('{sizeDimen}', dots[i].r0); - tip = tip.replace('{colorDimen}', dots[i].c0); - tip = tip.replace('{timeDimen}', time); - - d.hover(function () { - floatTag.html(tip).css(conf.tipStyle); - floatTag.css({"visibility" : "visible"}); - if (!that.choose) { - d.attr({"stroke-width": 1, "stroke": "#f00", "fill-opacity": 0.8}); - meshes.attr({"stroke": "#d6d6d6", "stroke-dasharray": "-", "stroke-width": 1}); - for (var j = 0, l = dotBubbleSet.length; j < l ; j++) { - if (j !== i) { - dotBubbleSet[j].attr({"stroke-width": 0, "fill-opacity": 0.2}); + (function (i) { + d.hover(function () { + floatTag.html(that.getTip(that.keys[i], Math.floor(time))).css(conf.tipStyle); + floatTag.css({"visibility" : "visible"}); + if (!that.choose) { + d.attr({"stroke-width": 1, "stroke": "#f00", "fill-opacity": 0.8}); + meshes.attr({"stroke": "#d6d6d6", "stroke-dasharray": "-", "stroke-width": 1}); + for (var j = 0, l = dotBubbleSet.length; j < l ; j++) { + if (j !== i) { + dotBubbleSet[j].attr({"stroke-width": 0, "fill-opacity": 0.2}); + } } } - } - }, function () { - floatTag.css({"visibility" : "hidden"}); - if (!that.choose) { - d.attr({"stroke-width": 0, "fill-opacity": 0.5}); - meshes.attr({"stroke": "#ebebeb", "stroke-dasharray": "-", "stroke-width": 1}); - for (var j = 0, l = dotBubbleSet.length; j < l ; j++) { - if (j !== i) { - dotBubbleSet[j].attr({"stroke-width": 0, "fill-opacity": 0.5}); + }, function () { + floatTag.css({"visibility" : "hidden"}); + if (!that.choose) { + d.attr({"stroke-width": 0, "fill-opacity": 0.5}); + meshes.attr({"stroke": "#ebebeb", "stroke-dasharray": "-", "stroke-width": 1}); + for (var j = 0, l = dotBubbleSet.length; j < l ; j++) { + if (j !== i) { + dotBubbleSet[j].attr({"stroke-width": 0, "fill-opacity": 0.5}); + } } } - } - }); + }); - d.click(function() { - if (time === Math.ceil(time)) { - drawAllTime(this.data("key"), i); - } else { - drawAllTime(this.data("key"), i); - this.remove(); - } - }); + d.click(function() { + if (time === Math.ceil(time)) { + drawAllTime(this.data("key"), i); + } else { + drawAllTime(this.data("key"), i); + this.remove(); + } + }); + }(i)); }); // colorbar interaction for showing all same color history data @@ -626,7 +626,7 @@ if (timeKeys[i] === Math.ceil(time)) { historyBubble.attr({"stroke-width": 1, "stroke": "#f00"}); historyBubble.hover(function () { - floatTag.html(tipFormat.call(that, key, i)).css(conf.tipStyle); + floatTag.html(that.getTip(key, i)).css(conf.tipStyle); floatTag.css({"visibility" : "visible"}); }, function () { floatTag.css({"visibility" : "hidden"}); @@ -634,7 +634,7 @@ } else { historyBubble.hover(function () { this.attr({"stroke-width": 1, "stroke": "#f00"}); - floatTag.html(tipFormat.call(that, key, i)).css(conf.tipStyle); + floatTag.html(that.getTip(key, i)).css(conf.tipStyle); floatTag.css({"visibility" : "visible"}); }, function () { this.attr({"stroke-width": 0}); @@ -685,7 +685,7 @@ that.generatePaths(Math.ceil(time)); }); skeletonCircle.hover(function () { - floatTag.html(tipFormat.call(that, key, i)).css(conf.tipStyle); + floatTag.html(that.getTip(key, i)).css(conf.tipStyle); floatTag.css({"visibility" : "visible"}); skeletonCircleSet.attr({"fill-opacity": 0.35}); this.attr({"fill-opacity": 1, "r": 5}); @@ -700,7 +700,7 @@ }); } else { skeletonCircle.hover(function () { - floatTag.html(tipFormat.call(that, key, i)).css(conf.tipStyle); + floatTag.html(that.getTip(key, i)).css(conf.tipStyle); floatTag.css({"visibility" : "visible"}); skeletonCircleSet.attr({"fill-opacity": 0.35}); this.attr({"fill-opacity": 1, "r": 5});