mirror of
https://github.com/TBEDP/datavjs.git
synced 2026-02-01 16:06:25 +00:00
Jackson Tian
commit
5c851d7f1f
@ -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 = '<b>' + this.keyDimen + ':{key}</b><br />' +
|
||||
'<b>' + this.xDimen + ':{xDimen}</b><br/>' +
|
||||
'<b>' + this.yDimen + ':{yDimen}</b><br/>' +
|
||||
@ -71,19 +80,12 @@
|
||||
'<b>' + this.colorDimen + ':{colorDimen}</b><br/>' +
|
||||
'<b>' + this.timeDimen + ':{timeDimen}</b>';
|
||||
|
||||
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 = '<b>' + that.keyDimen + ':{key}</b><br/><b>' +
|
||||
that.xDimen + ':{xDimen}</b><br/><b>' +
|
||||
that.yDimen + ':{yDimen}</b><br/><b>' +
|
||||
that.sizeDimen + ':{sizeDimen}</b><br/><b>' +
|
||||
that.colorDimen + ':{colorDimen}</b><br/><b>' +
|
||||
that.timeDimen + ':{timeDimen}</b>';
|
||||
|
||||
// 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});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user