blob42/nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updated scatter.js so that when you mouseover a path-point, it will return all series information in the mouse event dispatch.

Browse Source 
Updated nv.models.tooltip with more features.
Updated styling of the tooltip.
This commit is contained in:
Robin Hu 2013-07-02 16:07:20 -04:00
parent 79fb28f088
commit dc66846d46
4 changed files with 78 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/models/lineChart.js
View File

@ -49,25 +49,22 @@ nv.models.lineChart = function() {
//------------------------------------------------------------
var showTooltip = function(e, offsetElement) {
var x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)),
y = yAxis.tickFormat()(lines.y()(e.point, e.pointIndex))
;
var x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex));
var tip = nv.models.tooltip()
.position({left: e.pos[0], top: e.pos[1]})
.chartContainer(offsetElement)
.fixedTop(30)
// .contentGenerator(tooltip)
.enabled(tooltips)
.valueFormatter(function(d,i) {
return yAxis.tickFormat()(d);
})
.data(
{
key: e.series.key,
key: "",
value: x,
series: [
{key: e.series.key,
value: y},
{key: 'Series2',
value: y}
]
seriesSelectedKey: e.series.key,
series: e.allSeriesData
}
)
.render()
@ -277,7 +274,7 @@ nv.models.lineChart = function() {
*/
dispatch.on('tooltipShow', function(e) {
if (tooltips) showTooltip(e, that.parentNode);
showTooltip(e, that.parentNode);
});

58
src/models/scatter.js
View File

@ -243,44 +243,38 @@ nv.models.scatter = function() {
return 'M' + d.data.join('L') + 'Z';
});
var mouseEventCallback = function(d,mDispatch) {
if (needsUpdate) return 0;
var series = data[d.series],
point = series.values[d.point];
var allSeriesData = [];
data.forEach(function(item) {
allSeriesData.push({
key: item.key,
value: getY(item.values[d.point], d.point)
});
});
mDispatch({
point: point,
series: series,
pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
seriesIndex: d.series,
pointIndex: d.point,
allSeriesData: allSeriesData
});
};
pointPaths
.on('click', function(d) {
if (needsUpdate) return 0;
var series = data[d.series],
point = series.values[d.point];
dispatch.elementClick({
point: point,
series: series,
pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
seriesIndex: d.series,
pointIndex: d.point
});
mouseEventCallback(d, dispatch.elementClick);
})
.on('mouseover', function(d) {
if (needsUpdate) return 0;
var series = data[d.series],
point = series.values[d.point];
dispatch.elementMouseover({
point: point,
series: series,
pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
seriesIndex: d.series,
pointIndex: d.point
});
mouseEventCallback(d, dispatch.elementMouseover);
})
.on('mouseout', function(d, i) {
if (needsUpdate) return 0;
var series = data[d.series],
point = series.values[d.point];
dispatch.elementMouseout({
point: point,
series: series,
seriesIndex: d.series,
pointIndex: d.point
});
mouseEventCallback(d, dispatch.elementMouseout);
});

17
src/nv.d3.css
View File

@ -84,6 +84,23 @@
margin: 2px 0;
}
.nvtooltip table {
margin: 6px;
}
.nvtooltip table td {
padding-right: 6px;
padding-bottom: 3px;
}
.nvtooltip table tr.selected td.key {
font-weight: bold;
}
.nvtooltip table td.value {
text-align: right;
font-weight: bold;
}
.nvtooltip-pending-removal {
position: absolute;
pointer-events: none;

30
src/tooltip.js
View File

@ -19,6 +19,7 @@
{
key: "Date",
value: "August 2009",
seriesSelectedKey: "Series 2",
series: [
{
key: "Series 1",
@ -39,18 +40,24 @@
, classes = null //Attaches additional CSS classes to the tooltip DIV that is created.
, chartContainer = null //Parent container that holds the chart.
, position = {left: null, top: null} //Relative position of the tooltip inside chartContainer.
, enabled = true //True -> tooltips are rendered. False -> don't render tooltips.
;
var valueFormatter = function(d,i) {
return d;
};
var contentGenerator = function(d) {
if (content != null) return content;
if (d == null) return '';
var html = "<table><thead><strong class='x-value'>" + d.value + "</strong></thead><tbody>";
var html = "<table><thead><tr><td colspan='2'><strong class='x-value'>" + d.value + "</strong></td></tr></thead><tbody>";
if (d.series instanceof Array) {
d.series.forEach(function(item) {
html += "<tr><td class='key'>" + item.key + ":</td>";
html += "<td class='value'>" + item.value + "</td></tr>";
d.series.forEach(function(item, i) {
var isSelected = (item.key === d.seriesSelectedKey) ? "selected" : "";
html += "<tr class='" + isSelected + "'><td class='key'>" + item.key + ":</td>";
html += "<td class='value'>" + valueFormatter(item.value,i) + "</td></tr>";
});
}
html += "</tbody></table>";
@ -75,6 +82,8 @@
//Draw the tooltip onto the DOM.
nvtooltip.render = function() {
if (!enabled) return;
convertViewBoxRatio();
var left = position.left;
@ -150,6 +159,19 @@
return nvtooltip;
};
nvtooltip.enabled = function(_) {
if (!arguments.length) return enabled;
enabled = _;
return nvtooltip;
};
nvtooltip.valueFormatter = function(_) {
if (!arguments.length) return valueFormatter;
if (typeof _ === 'function') {
valueFormatter = _;
}
return nvtooltip;
};
return nvtooltip;