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

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
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.
this._assignedColors = {};
// 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]);
}
uniqueValues.forEach(function (e) {
match = match || (e.join("/") === filter.join("/"));
match = match || (e === filter.join("/"));
}, this);
if (!match) {
uniqueValues.push(filter);
uniqueValues.push(filter.join("/"));
}
}, this);
@ -1963,7 +1967,7 @@ var dimple = {
.data(uniqueValues)
.transition()
.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) {
var seriesData,
baseline = [],
@ -2119,15 +2123,17 @@ var dimple = {
h = 0,
box,
overlap,
rows = [],
// Create a group for the hover objects
g = chart._group.append("g")
.attr("class", "hoverShapes");
rows = [];
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// On hover make the line marker visible immediately
selectedShape.style("opacity", 1);
// Add a ring around the data point
g.append("circle")
chart._tooltipGroup.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", r)
@ -2144,7 +2150,7 @@ var dimple = {
// Add a drop line to the x axis
if (dropDest.y !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4))
.attr("x2", cx)
@ -2163,7 +2169,7 @@ var dimple = {
// Add a drop line to the y axis
if (dropDest.x !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
.attr("y1", cy)
.attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
@ -2181,7 +2187,7 @@ var dimple = {
}
// Add a group for text
t = g.append("g");
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
@ -2279,10 +2285,9 @@ var dimple = {
leaveEventHandler: function (e, shape, chart, series) {
// Return the opacity of the marker
d3.select(shape).style("opacity", (series.lineMarkers ? dimple._helpers.opacity(e, chart, series) : 0));
// Clear all hover shapes
chart._group
.selectAll(".hoverShapes")
.remove();
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
}
};
@ -2413,14 +2418,16 @@ var dimple = {
yRunning = 0,
// The maximum bounds of the text elements
w = 0,
h = 0,
// Create a group for the hover objects
g = chart._group.append("g")
.attr("class", "hoverShapes");
h = 0;
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// Add a drop line to the x axis
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("y1", (y < dropDest.y ? y + height : y))
.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
if (!series.y._hasCategories() && dropDest.x !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", (x < dropDest.x ? x + width : x))
.attr("y1", (y < series.y._origin ? y + 1 : y + height - 1))
.attr("x2", (x < dropDest.x ? x + width : x))
@ -2457,7 +2464,7 @@ var dimple = {
}
// Add a group for text
t = g.append("g");
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
@ -2566,10 +2573,9 @@ var dimple = {
// Handle the mouse leave event
leaveEventHandler: function (chart) {
// Clear all hover shapes
chart._group
.selectAll(".hoverShapes")
.remove();
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
}
};
@ -2697,13 +2703,15 @@ var dimple = {
// The maximum bounds of the text elements
w = 0,
h = 0,
overlap,
// Create a group for the hover objects
g = chart._group.append("g")
.attr("class", "hoverShapes");
overlap;
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// Add a ring around the data point
g.append("circle")
chart._tooltipGroup.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", r)
@ -2720,7 +2728,7 @@ var dimple = {
// Add a drop line to the x axis
if (dropDest.y !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4))
.attr("x2", cx)
@ -2739,7 +2747,7 @@ var dimple = {
// Add a drop line to the y axis
if (dropDest.x !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
.attr("y1", cy)
.attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
@ -2757,7 +2765,7 @@ var dimple = {
}
// Add a group for text
t = g.append("g");
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
@ -2853,10 +2861,9 @@ var dimple = {
// Handle the mouse leave event
leaveEventHandler: function (chart) {
// Clear all hover shapes
chart._group
.selectAll(".hoverShapes")
.remove();
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
}
};
@ -3062,16 +3069,18 @@ var dimple = {
t,
box,
rows = [],
overlap,
// Create a group for the hover objects
g = chart._group.append("g")
.attr("class", "hoverShapes");
overlap;
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// On hover make the line marker visible immediately
selectedShape.style("opacity", 1);
// Add a ring around the data point
g.append("circle")
chart._tooltipGroup.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", r)
@ -3088,7 +3097,7 @@ var dimple = {
// Add a drop line to the x axis
if (dropDest.y !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + series.lineWeight + 2 : cy - r - series.lineWeight - 2))
.attr("x2", cx)
@ -3107,7 +3116,7 @@ var dimple = {
// Add a drop line to the y axis
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("y1", cy)
.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
t = g.append("g");
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
@ -3223,10 +3232,9 @@ var dimple = {
leaveEventHandler: function (e, shape, chart, series) {
// Return the opacity of the marker
d3.select(shape).style("opacity", (series.lineMarkers ? dimple._helpers.opacity(e, chart, series) : 0));
// Clear all hover shapes
chart._group
.selectAll(".hoverShapes")
.remove();
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.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");
// Set the bounds for the charts
var row = 2,
col = 3,
var row = 0,
col = 0,
top = 25,
left = 60,
inMarg = 15,
width = 115,
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
months = months.slice(0, 12);
months = months.slice(months.length - 12);
// Draw a chart for each of the 12 dates
months.forEach(function (month) {
// Wrap to the row above
if (col < 0) {
row -= 1;
col = 3;
if (left + ((col + 1) * (width + inMarg)) > parseFloat(svg.attr("width"))) {
row += 1;
col = 0;
}
// Filter for the month in the iteration
@ -88,7 +83,7 @@
x.titleShape.remove();
// Move to the next column
col -= 1;
col += 1;
}, 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
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.
this._assignedColors = {};
// 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]);
}
uniqueValues.forEach(function (e) {
match = match || (e.join("/") === filter.join("/"));
match = match || (e === filter.join("/"));
}, this);
if (!match) {
uniqueValues.push(filter);
uniqueValues.push(filter.join("/"));
}
}, this);
@ -61,7 +61,7 @@
.data(uniqueValues)
.transition()
.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) {
var seriesData,
baseline = [],
@ -217,15 +217,17 @@
h = 0,
box,
overlap,
rows = [],
// Create a group for the hover objects
g = chart._group.append("g")
.attr("class", "hoverShapes");
rows = [];
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// On hover make the line marker visible immediately
selectedShape.style("opacity", 1);
// Add a ring around the data point
g.append("circle")
chart._tooltipGroup.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", r)
@ -242,7 +244,7 @@
// Add a drop line to the x axis
if (dropDest.y !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4))
.attr("x2", cx)
@ -261,7 +263,7 @@
// Add a drop line to the y axis
if (dropDest.x !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
.attr("y1", cy)
.attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
@ -279,7 +281,7 @@
}
// Add a group for text
t = g.append("g");
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
@ -377,10 +379,9 @@
leaveEventHandler: function (e, shape, chart, series) {
// Return the opacity of the marker
d3.select(shape).style("opacity", (series.lineMarkers ? dimple._helpers.opacity(e, chart, series) : 0));
// Clear all hover shapes
chart._group
.selectAll(".hoverShapes")
.remove();
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
}
};

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

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

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

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

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

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