vitalif-js
/
dimple
mirror of https://github.com/vitalif/dimple
1
0
Fork 0
Code Issues Releases Wiki Activity

Made tooltips always on top

master
John Kiernander 2013-06-24 09:35:51 +01:00
parent bfe3038665
commit fe6449b4a6
9 changed files with 126 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/example_data.tsv
View File

@ -1726,4 +1726,4 @@ Date Month Channel Owner Brand Pack Size Pack Type SKU Price Tier Unit Sales Sal
01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 8 Standard Kappa 8 Pack Standard Regular 11263 703847 36.56 1788.2 62.49 702058.8 655473.24 46585.56 -10565 -625137 1.02 -1588.22 1.61 -623548.78 -582171.91 -41376.87 01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 8 Standard Kappa 8 Pack Standard Regular 11263 703847 36.56 1788.2 62.49 702058.8 655473.24 46585.56 -10565 -625137 1.02 -1588.22 1.61 -623548.78 -582171.91 -41376.87
01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 12 Standard Kappa 12 Pack Standard Regular 4999 377208 39 958.34 75.46 376249.66 351283.18 24966.48 1864 128842 4.93 327.34 -3.76 128514.66 119986.56 8528.1 01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 12 Standard Kappa 12 Pack Standard Regular 4999 377208 39 958.34 75.46 376249.66 351283.18 24966.48 1864 128842 4.93 327.34 -3.76 128514.66 119986.56 8528.1
01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 18 Standard Kappa 18 Pack Standard Regular 5330 339454 31.78 862.42 63.69 338591.58 316124.13 22467.45 -1763 -103005 -0.35 -261.69 1.31 -102743.31 -95925.65 -6817.66 01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 18 Standard Kappa 18 Pack Standard Regular 5330 339454 31.78 862.42 63.69 338591.58 316124.13 22467.45 -1763 -103005 -0.35 -261.69 1.31 -102743.31 -95925.65 -6817.66
01/12/2012 Dec-12 Supermarkets Wayne Ent Pi 12 Giftset Pi 12 Pack Giftset Regular 176 14269 5.97 36.25 81.07 14232.75 13288.51 944.24 4 -3 0.12 -0.01 -1.91 -2.99 -2.79 -0.2 01/12/2012 Dec-12 Supermarkets Wayne Ent Pi 12 Giftset Pi 12 Pack Giftset Regular 176 14269 5.97 36.25 81.07 14232.75 13288.51 944.24 4 -3 0.12 -0.01 -1.91 -2.99 -2.79 -0.2
1 Date Month Channel Owner Brand Pack Size Pack Type SKU Price Tier Unit Sales Sales Value Distribution Cost of Sales Price Gross Profit Indirect Costs Operating Profit Unit Sales Monthly Change Sales Value Monthly Change Distribution Monthly Change Cost of Sales Monthly Change Price Monthly Change Gross Profit Monthly Change Indirect Costs Monthly Change Operating Profit Monthly Change
1726 01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 8 Standard Kappa 8 Pack Standard Regular 11263 703847 36.56 1788.2 62.49 702058.8 655473.24 46585.56 -10565 -625137 1.02 -1588.22 1.61 -623548.78 -582171.91 -41376.87
1727 01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 12 Standard Kappa 12 Pack Standard Regular 4999 377208 39 958.34 75.46 376249.66 351283.18 24966.48 1864 128842 4.93 327.34 -3.76 128514.66 119986.56 8528.1
1728 01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 18 Standard Kappa 18 Pack Standard Regular 5330 339454 31.78 862.42 63.69 338591.58 316124.13 22467.45 -1763 -103005 -0.35 -261.69 1.31 -102743.31 -95925.65 -6817.66
1729 01/12/2012 Dec-12 Supermarkets Wayne Ent Pi 12 Giftset Pi 12 Pack Giftset Regular 176 14269 5.97 36.25 81.07 14232.75 13288.51 944.24 4 -3 0.12 -0.01 -1.91 -2.99 -2.79 -0.2

108
dist/dimple.v1.js vendored
View File

@ -317,6 +317,10 @@ var dimple = {
// The group within which to put all of this chart's objects // The group within which to put all of this chart's objects
this._group = svg.append("g"); this._group = svg.append("g");
// The group within which to put tooltips. This is not initialised here because
// the group would end up behind other chart contents in a multi chart output. It will
// therefore be added and removed by the mouse enter/leave events
this._tooltipGroup = null;
// Colors assigned to chart contents. E.g. a series value. // Colors assigned to chart contents. E.g. a series value.
this._assignedColors = {}; this._assignedColors = {};
// The next colour index to use, this value is cycled around for all default colours // The next colour index to use, this value is cycled around for all default colours
@ -1932,10 +1936,10 @@ var dimple = {
filter.push(d.aggField[k]); filter.push(d.aggField[k]);
} }
uniqueValues.forEach(function (e) { uniqueValues.forEach(function (e) {
match = match || (e.join("/") === filter.join("/")); match = match || (e === filter.join("/"));
}, this); }, this);
if (!match) { if (!match) {
uniqueValues.push(filter); uniqueValues.push(filter.join("/"));
} }
}, this); }, this);
@ -1963,7 +1967,7 @@ var dimple = {
.data(uniqueValues) .data(uniqueValues)
.transition() .transition()
.duration(duration) .duration(duration)
.attr("class", function (d) { return "series area " + d.join("_").replace(" ", ""); }) .attr("class", function (d) { return "series area " + d.replace(" ", ""); })
.attr("d", function (d) { .attr("d", function (d) {
var seriesData, var seriesData,
baseline = [], baseline = [],
@ -2119,15 +2123,17 @@ var dimple = {
h = 0, h = 0,
box, box,
overlap, overlap,
rows = [], rows = [];
// Create a group for the hover objects
g = chart._group.append("g") if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
.attr("class", "hoverShapes"); chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// On hover make the line marker visible immediately // On hover make the line marker visible immediately
selectedShape.style("opacity", 1); selectedShape.style("opacity", 1);
// Add a ring around the data point // Add a ring around the data point
g.append("circle") chart._tooltipGroup.append("circle")
.attr("cx", cx) .attr("cx", cx)
.attr("cy", cy) .attr("cy", cy)
.attr("r", r) .attr("r", r)
@ -2144,7 +2150,7 @@ var dimple = {
// Add a drop line to the x axis // Add a drop line to the x axis
if (dropDest.y !== null) { if (dropDest.y !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", cx) .attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4)) .attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4))
.attr("x2", cx) .attr("x2", cx)
@ -2163,7 +2169,7 @@ var dimple = {
// Add a drop line to the y axis // Add a drop line to the y axis
if (dropDest.x !== null) { if (dropDest.x !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4)) .attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
.attr("y1", cy) .attr("y1", cy)
.attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4)) .attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
@ -2181,7 +2187,7 @@ var dimple = {
} }
// Add a group for text // Add a group for text
t = g.append("g"); t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group // Create a box for the popup in the text group
box = t.append("rect"); box = t.append("rect");
@ -2279,10 +2285,9 @@ var dimple = {
leaveEventHandler: function (e, shape, chart, series) { leaveEventHandler: function (e, shape, chart, series) {
// Return the opacity of the marker // Return the opacity of the marker
d3.select(shape).style("opacity", (series.lineMarkers ? dimple._helpers.opacity(e, chart, series) : 0)); d3.select(shape).style("opacity", (series.lineMarkers ? dimple._helpers.opacity(e, chart, series) : 0));
// Clear all hover shapes if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._group chart._tooltipGroup.remove();
.selectAll(".hoverShapes") }
.remove();
} }
}; };
@ -2413,14 +2418,16 @@ var dimple = {
yRunning = 0, yRunning = 0,
// The maximum bounds of the text elements // The maximum bounds of the text elements
w = 0, w = 0,
h = 0, h = 0;
// Create a group for the hover objects
g = chart._group.append("g") if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
.attr("class", "hoverShapes"); chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// Add a drop line to the x axis // Add a drop line to the x axis
if (!series.x._hasCategories() && dropDest.y !== null) { if (!series.x._hasCategories() && dropDest.y !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", (x < series.x._origin ? x + 1 : x + width - 1)) .attr("x1", (x < series.x._origin ? x + 1 : x + width - 1))
.attr("y1", (y < dropDest.y ? y + height : y)) .attr("y1", (y < dropDest.y ? y + height : y))
.attr("x2", (x < series.x._origin ? x + 1 : x + width - 1)) .attr("x2", (x < series.x._origin ? x + 1 : x + width - 1))
@ -2439,7 +2446,7 @@ var dimple = {
// Add a drop line to the y axis // Add a drop line to the y axis
if (!series.y._hasCategories() && dropDest.x !== null) { if (!series.y._hasCategories() && dropDest.x !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", (x < dropDest.x ? x + width : x)) .attr("x1", (x < dropDest.x ? x + width : x))
.attr("y1", (y < series.y._origin ? y + 1 : y + height - 1)) .attr("y1", (y < series.y._origin ? y + 1 : y + height - 1))
.attr("x2", (x < dropDest.x ? x + width : x)) .attr("x2", (x < dropDest.x ? x + width : x))
@ -2457,7 +2464,7 @@ var dimple = {
} }
// Add a group for text // Add a group for text
t = g.append("g"); t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group // Create a box for the popup in the text group
box = t.append("rect"); box = t.append("rect");
@ -2566,10 +2573,9 @@ var dimple = {
// Handle the mouse leave event // Handle the mouse leave event
leaveEventHandler: function (chart) { leaveEventHandler: function (chart) {
// Clear all hover shapes if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._group chart._tooltipGroup.remove();
.selectAll(".hoverShapes") }
.remove();
} }
}; };
@ -2697,13 +2703,15 @@ var dimple = {
// The maximum bounds of the text elements // The maximum bounds of the text elements
w = 0, w = 0,
h = 0, h = 0,
overlap, overlap;
// Create a group for the hover objects
g = chart._group.append("g") if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
.attr("class", "hoverShapes"); chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// Add a ring around the data point // Add a ring around the data point
g.append("circle") chart._tooltipGroup.append("circle")
.attr("cx", cx) .attr("cx", cx)
.attr("cy", cy) .attr("cy", cy)
.attr("r", r) .attr("r", r)
@ -2720,7 +2728,7 @@ var dimple = {
// Add a drop line to the x axis // Add a drop line to the x axis
if (dropDest.y !== null) { if (dropDest.y !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", cx) .attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4)) .attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4))
.attr("x2", cx) .attr("x2", cx)
@ -2739,7 +2747,7 @@ var dimple = {
// Add a drop line to the y axis // Add a drop line to the y axis
if (dropDest.x !== null) { if (dropDest.x !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4)) .attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
.attr("y1", cy) .attr("y1", cy)
.attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4)) .attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
@ -2757,7 +2765,7 @@ var dimple = {
} }
// Add a group for text // Add a group for text
t = g.append("g"); t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group // Create a box for the popup in the text group
box = t.append("rect"); box = t.append("rect");
@ -2853,10 +2861,9 @@ var dimple = {
// Handle the mouse leave event // Handle the mouse leave event
leaveEventHandler: function (chart) { leaveEventHandler: function (chart) {
// Clear all hover shapes if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._group chart._tooltipGroup.remove();
.selectAll(".hoverShapes") }
.remove();
} }
}; };
@ -3062,16 +3069,18 @@ var dimple = {
t, t,
box, box,
rows = [], rows = [],
overlap, overlap;
// Create a group for the hover objects
g = chart._group.append("g") if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
.attr("class", "hoverShapes"); chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// On hover make the line marker visible immediately // On hover make the line marker visible immediately
selectedShape.style("opacity", 1); selectedShape.style("opacity", 1);
// Add a ring around the data point // Add a ring around the data point
g.append("circle") chart._tooltipGroup.append("circle")
.attr("cx", cx) .attr("cx", cx)
.attr("cy", cy) .attr("cy", cy)
.attr("r", r) .attr("r", r)
@ -3088,7 +3097,7 @@ var dimple = {
// Add a drop line to the x axis // Add a drop line to the x axis
if (dropDest.y !== null) { if (dropDest.y !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", cx) .attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + series.lineWeight + 2 : cy - r - series.lineWeight - 2)) .attr("y1", (cy < dropDest.y ? cy + r + series.lineWeight + 2 : cy - r - series.lineWeight - 2))
.attr("x2", cx) .attr("x2", cx)
@ -3107,7 +3116,7 @@ var dimple = {
// Add a drop line to the y axis // Add a drop line to the y axis
if (dropDest.x !== null) { if (dropDest.x !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", (cx < dropDest.x ? cx + r + series.lineWeight + 2 : cx - r - series.lineWeight - 2)) .attr("x1", (cx < dropDest.x ? cx + r + series.lineWeight + 2 : cx - r - series.lineWeight - 2))
.attr("y1", cy) .attr("y1", cy)
.attr("x2", (cx < dropDest.x ? cx + r + series.lineWeight + 2 : cx - r - series.lineWeight - 2)) .attr("x2", (cx < dropDest.x ? cx + r + series.lineWeight + 2 : cx - r - series.lineWeight - 2))
@ -3125,7 +3134,7 @@ var dimple = {
} }
// Add a group for text // Add a group for text
t = g.append("g"); t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group // Create a box for the popup in the text group
box = t.append("rect"); box = t.append("rect");
@ -3223,10 +3232,9 @@ var dimple = {
leaveEventHandler: function (e, shape, chart, series) { leaveEventHandler: function (e, shape, chart, series) {
// Return the opacity of the marker // Return the opacity of the marker
d3.select(shape).style("opacity", (series.lineMarkers ? dimple._helpers.opacity(e, chart, series) : 0)); d3.select(shape).style("opacity", (series.lineMarkers ? dimple._helpers.opacity(e, chart, series) : 0));
// Clear all hover shapes if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._group chart._tooltipGroup.remove();
.selectAll(".hoverShapes") }
.remove();
} }
}; };

4
dist/dimple.v1.min.js vendored
View File

File diff suppressed because one or more lines are too long

19
examples/advanced_trellis_bar.html
View File

@ -9,29 +9,24 @@
var months = dimple.getUniqueValues(data, "Date"); var months = dimple.getUniqueValues(data, "Date");
// Set the bounds for the charts // Set the bounds for the charts
var row = 2, var row = 0,
col = 3, col = 0,
top = 25, top = 25,
left = 60, left = 60,
inMarg = 15, inMarg = 15,
width = 115, width = 115,
height = 90; height = 90;
// Sort the months in descending order so that when tooltips are drawn
// they won't be behind the chart on the right. This is because all
// chart shapes (including tooltips) are grouped.
months.sort(function (a, b) { return Date.parse(b) - Date.parse(a); });
// Pick the latest 12 dates // Pick the latest 12 dates
months = months.slice(0, 12); months = months.slice(months.length - 12);
// Draw a chart for each of the 12 dates // Draw a chart for each of the 12 dates
months.forEach(function (month) { months.forEach(function (month) {
// Wrap to the row above // Wrap to the row above
if (col < 0) { if (left + ((col + 1) * (width + inMarg)) > parseFloat(svg.attr("width"))) {
row -= 1; row += 1;
col = 3; col = 0;
} }
// Filter for the month in the iteration // Filter for the month in the iteration
@ -88,7 +83,7 @@
x.titleShape.remove(); x.titleShape.remove();
// Move to the next column // Move to the next column
col -= 1; col += 1;
}, this); }, this);
}); });

4
src/objects/chart/begin.js
View File

@ -33,6 +33,10 @@
// The group within which to put all of this chart's objects // The group within which to put all of this chart's objects
this._group = svg.append("g"); this._group = svg.append("g");
// The group within which to put tooltips. This is not initialised here because
// the group would end up behind other chart contents in a multi chart output. It will
// therefore be added and removed by the mouse enter/leave events
this._tooltipGroup = null;
// Colors assigned to chart contents. E.g. a series value. // Colors assigned to chart contents. E.g. a series value.
this._assignedColors = {}; this._assignedColors = {};
// The next colour index to use, this value is cycled around for all default colours // The next colour index to use, this value is cycled around for all default colours

31
src/objects/plot/area.js
View File

@ -30,10 +30,10 @@
filter.push(d.aggField[k]); filter.push(d.aggField[k]);
} }
uniqueValues.forEach(function (e) { uniqueValues.forEach(function (e) {
match = match || (e.join("/") === filter.join("/")); match = match || (e === filter.join("/"));
}, this); }, this);
if (!match) { if (!match) {
uniqueValues.push(filter); uniqueValues.push(filter.join("/"));
} }
}, this); }, this);
@ -61,7 +61,7 @@
.data(uniqueValues) .data(uniqueValues)
.transition() .transition()
.duration(duration) .duration(duration)
.attr("class", function (d) { return "series area " + d.join("_").replace(" ", ""); }) .attr("class", function (d) { return "series area " + d.replace(" ", ""); })
.attr("d", function (d) { .attr("d", function (d) {
var seriesData, var seriesData,
baseline = [], baseline = [],
@ -217,15 +217,17 @@
h = 0, h = 0,
box, box,
overlap, overlap,
rows = [], rows = [];
// Create a group for the hover objects
g = chart._group.append("g") if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
.attr("class", "hoverShapes"); chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// On hover make the line marker visible immediately // On hover make the line marker visible immediately
selectedShape.style("opacity", 1); selectedShape.style("opacity", 1);
// Add a ring around the data point // Add a ring around the data point
g.append("circle") chart._tooltipGroup.append("circle")
.attr("cx", cx) .attr("cx", cx)
.attr("cy", cy) .attr("cy", cy)
.attr("r", r) .attr("r", r)
@ -242,7 +244,7 @@
// Add a drop line to the x axis // Add a drop line to the x axis
if (dropDest.y !== null) { if (dropDest.y !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", cx) .attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4)) .attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4))
.attr("x2", cx) .attr("x2", cx)
@ -261,7 +263,7 @@
// Add a drop line to the y axis // Add a drop line to the y axis
if (dropDest.x !== null) { if (dropDest.x !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4)) .attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
.attr("y1", cy) .attr("y1", cy)
.attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4)) .attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
@ -279,7 +281,7 @@
} }
// Add a group for text // Add a group for text
t = g.append("g"); t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group // Create a box for the popup in the text group
box = t.append("rect"); box = t.append("rect");
@ -377,10 +379,9 @@
leaveEventHandler: function (e, shape, chart, series) { leaveEventHandler: function (e, shape, chart, series) {
// Return the opacity of the marker // Return the opacity of the marker
d3.select(shape).style("opacity", (series.lineMarkers ? dimple._helpers.opacity(e, chart, series) : 0)); d3.select(shape).style("opacity", (series.lineMarkers ? dimple._helpers.opacity(e, chart, series) : 0));
// Clear all hover shapes if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._group chart._tooltipGroup.remove();
.selectAll(".hoverShapes") }
.remove();
} }
}; };

23
src/objects/plot/bar.js
View File

@ -124,14 +124,16 @@
yRunning = 0, yRunning = 0,
// The maximum bounds of the text elements // The maximum bounds of the text elements
w = 0, w = 0,
h = 0, h = 0;
// Create a group for the hover objects
g = chart._group.append("g") if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
.attr("class", "hoverShapes"); chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// Add a drop line to the x axis // Add a drop line to the x axis
if (!series.x._hasCategories() && dropDest.y !== null) { if (!series.x._hasCategories() && dropDest.y !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", (x < series.x._origin ? x + 1 : x + width - 1)) .attr("x1", (x < series.x._origin ? x + 1 : x + width - 1))
.attr("y1", (y < dropDest.y ? y + height : y)) .attr("y1", (y < dropDest.y ? y + height : y))
.attr("x2", (x < series.x._origin ? x + 1 : x + width - 1)) .attr("x2", (x < series.x._origin ? x + 1 : x + width - 1))
@ -150,7 +152,7 @@
// Add a drop line to the y axis // Add a drop line to the y axis
if (!series.y._hasCategories() && dropDest.x !== null) { if (!series.y._hasCategories() && dropDest.x !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", (x < dropDest.x ? x + width : x)) .attr("x1", (x < dropDest.x ? x + width : x))
.attr("y1", (y < series.y._origin ? y + 1 : y + height - 1)) .attr("y1", (y < series.y._origin ? y + 1 : y + height - 1))
.attr("x2", (x < dropDest.x ? x + width : x)) .attr("x2", (x < dropDest.x ? x + width : x))
@ -168,7 +170,7 @@
} }
// Add a group for text // Add a group for text
t = g.append("g"); t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group // Create a box for the popup in the text group
box = t.append("rect"); box = t.append("rect");
@ -277,10 +279,9 @@
// Handle the mouse leave event // Handle the mouse leave event
leaveEventHandler: function (chart) { leaveEventHandler: function (chart) {
// Clear all hover shapes if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._group chart._tooltipGroup.remove();
.selectAll(".hoverShapes") }
.remove();
} }
}; };

25
src/objects/plot/bubble.js
View File

@ -121,13 +121,15 @@
// The maximum bounds of the text elements // The maximum bounds of the text elements
w = 0, w = 0,
h = 0, h = 0,
overlap, overlap;
// Create a group for the hover objects
g = chart._group.append("g") if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
.attr("class", "hoverShapes"); chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// Add a ring around the data point // Add a ring around the data point
g.append("circle") chart._tooltipGroup.append("circle")
.attr("cx", cx) .attr("cx", cx)
.attr("cy", cy) .attr("cy", cy)
.attr("r", r) .attr("r", r)
@ -144,7 +146,7 @@
// Add a drop line to the x axis // Add a drop line to the x axis
if (dropDest.y !== null) { if (dropDest.y !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", cx) .attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4)) .attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4))
.attr("x2", cx) .attr("x2", cx)
@ -163,7 +165,7 @@
// Add a drop line to the y axis // Add a drop line to the y axis
if (dropDest.x !== null) { if (dropDest.x !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4)) .attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
.attr("y1", cy) .attr("y1", cy)
.attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4)) .attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
@ -181,7 +183,7 @@
} }
// Add a group for text // Add a group for text
t = g.append("g"); t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group // Create a box for the popup in the text group
box = t.append("rect"); box = t.append("rect");
@ -277,10 +279,9 @@
// Handle the mouse leave event // Handle the mouse leave event
leaveEventHandler: function (chart) { leaveEventHandler: function (chart) {
// Clear all hover shapes if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._group chart._tooltipGroup.remove();
.selectAll(".hoverShapes") }
.remove();
} }
}; };

25
src/objects/plot/line.js
View File

@ -199,16 +199,18 @@
t, t,
box, box,
rows = [], rows = [],
overlap, overlap;
// Create a group for the hover objects
g = chart._group.append("g") if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
.attr("class", "hoverShapes"); chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// On hover make the line marker visible immediately // On hover make the line marker visible immediately
selectedShape.style("opacity", 1); selectedShape.style("opacity", 1);
// Add a ring around the data point // Add a ring around the data point
g.append("circle") chart._tooltipGroup.append("circle")
.attr("cx", cx) .attr("cx", cx)
.attr("cy", cy) .attr("cy", cy)
.attr("r", r) .attr("r", r)
@ -225,7 +227,7 @@
// Add a drop line to the x axis // Add a drop line to the x axis
if (dropDest.y !== null) { if (dropDest.y !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", cx) .attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + series.lineWeight + 2 : cy - r - series.lineWeight - 2)) .attr("y1", (cy < dropDest.y ? cy + r + series.lineWeight + 2 : cy - r - series.lineWeight - 2))
.attr("x2", cx) .attr("x2", cx)
@ -244,7 +246,7 @@
// Add a drop line to the y axis // Add a drop line to the y axis
if (dropDest.x !== null) { if (dropDest.x !== null) {
g.append("line") chart._tooltipGroup.append("line")
.attr("x1", (cx < dropDest.x ? cx + r + series.lineWeight + 2 : cx - r - series.lineWeight - 2)) .attr("x1", (cx < dropDest.x ? cx + r + series.lineWeight + 2 : cx - r - series.lineWeight - 2))
.attr("y1", cy) .attr("y1", cy)
.attr("x2", (cx < dropDest.x ? cx + r + series.lineWeight + 2 : cx - r - series.lineWeight - 2)) .attr("x2", (cx < dropDest.x ? cx + r + series.lineWeight + 2 : cx - r - series.lineWeight - 2))
@ -262,7 +264,7 @@
} }
// Add a group for text // Add a group for text
t = g.append("g"); t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group // Create a box for the popup in the text group
box = t.append("rect"); box = t.append("rect");
@ -360,10 +362,9 @@
leaveEventHandler: function (e, shape, chart, series) { leaveEventHandler: function (e, shape, chart, series) {
// Return the opacity of the marker // Return the opacity of the marker
d3.select(shape).style("opacity", (series.lineMarkers ? dimple._helpers.opacity(e, chart, series) : 0)); d3.select(shape).style("opacity", (series.lineMarkers ? dimple._helpers.opacity(e, chart, series) : 0));
// Clear all hover shapes if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._group chart._tooltipGroup.remove();
.selectAll(".hoverShapes") }
.remove();
} }
}; };