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

Updating tooltip content generator to use d3 select instead of manually concating strings.

Browse Source
master
Robin Hu 11 years ago
parent 3974ce1693
commit 96840219ee
5 changed files with 108 additions and 52 deletions
Show Stats Download Patch File Download Diff File

3
examples/multiBarHorizontalChart.html
Unescape Escape View File

@ -367,7 +367,8 @@ nv.addGraph(function() {
//.tooltips(false) //.tooltips(false)
.barColor(d3.scale.category20().range()) .barColor(d3.scale.category20().range())
.transitionDuration(250) .transitionDuration(250)
.showControls(true); .stacked(true)
//.showControls(false);
chart.yAxis chart.yAxis
.tickFormat(d3.format(',.2f')); .tickFormat(d3.format(',.2f'));

68
nv.d3.js
Unescape Escape View File

@ -399,6 +399,7 @@ window.nv.tooltip.* also has various helper methods.
, fixedTop = null //If not null, this fixes the top position of the tooltip. , fixedTop = null //If not null, this fixes the top position of the tooltip.
, classes = null //Attaches additional CSS classes to the tooltip DIV that is created. , classes = null //Attaches additional CSS classes to the tooltip DIV that is created.
, chartContainer = null //Parent DIV, of the SVG Container that holds the chart. , chartContainer = null //Parent DIV, of the SVG Container that holds the chart.
, tooltipElem = null //actual DOM element representing the tooltip.
, position = {left: null, top: null} //Relative position of the tooltip inside chartContainer. , position = {left: null, top: null} //Relative position of the tooltip inside chartContainer.
, enabled = true //True -> tooltips are rendered. False -> don't render tooltips. , enabled = true //True -> tooltips are rendered. False -> don't render tooltips.
//Generates a unique id when you create a new tooltip() object //Generates a unique id when you create a new tooltip() object
@ -425,27 +426,51 @@ window.nv.tooltip.* also has various helper methods.
if (d == null) return ''; if (d == null) return '';
var html = "<table><thead><tr><td colspan='3'><strong class='x-value'>" + headerFormatter(d.value) + "</strong></td></tr></thead><tbody>"; var table = d3.select(document.createElement("table"));
if (d.series instanceof Array) { var theadEnter = table.selectAll("thead")
d.series.forEach(function(item, i) { .data([d])
if (item.highlight) { .enter().append("thead");
html += "<tr class='highlight'>"; theadEnter.append("tr")
} .append("td")
else { .attr("colspan",3)
html += "<tr>"; .append("strong")
} .classed("x-value",true)
.text(headerFormatter(d.value));
html += "<td class='legend-color-guide'><div style='background-color: " + item.color + ";'></div></td>";
html += "<td class='key'>" + item.key + " </td>"; var tbodyEnter = table.selectAll("tbody")
html += "<td class='value'>" + valueFormatter(item.value,i) + "</td></tr>"; .data([d])
}); .enter().append("tbody");
} var trowEnter = tbodyEnter.selectAll("tr")
html += "</tbody>"; .data(function(p) { return p.series})
html += "</table>"; .enter()
.append("tr")
.classed("highlight", function(p) { return p.highlight})
;
trowEnter.append("td")
.classed("legend-color-guide",true)
.append("div")
.style("background-color", function(p) { return p.color});
trowEnter.append("td")
.classed("key",true)
.text(function(p) {return p.key});
trowEnter.append("td")
.classed("value",true)
.text(function(p,i) { return valueFormatter(p.value,i) });
trowEnter.selectAll("td").each(function(p) {
if (p.highlight)
d3.select(this)
.style("border-bottom","solid 1px " + p.color)
.style("border-top","solid 1px " + p.color)
;
});
var html = table.node().outerHTML;
if (d.footer !== undefined) if (d.footer !== undefined)
html += "<div class='footer'>" + d.footer + "</div>"; html += "<div class='footer'>" + d.footer + "</div>";
return html; return html;
}; };
var dataSeriesExists = function(d) { var dataSeriesExists = function(d) {
@ -509,7 +534,7 @@ window.nv.tooltip.* also has various helper methods.
var left = position.left; var left = position.left;
var top = (fixedTop != null) ? fixedTop : position.top; var top = (fixedTop != null) ? fixedTop : position.top;
var container = getTooltipContainer(contentGenerator(data)); var container = getTooltipContainer(contentGenerator(data));
tooltipElem = container;
if (chartContainer) { if (chartContainer) {
var svgComp = chartContainer.getElementsByTagName("svg")[0]; var svgComp = chartContainer.getElementsByTagName("svg")[0];
var boundRect = (svgComp) ? svgComp.getBoundingClientRect() : chartContainer.getBoundingClientRect(); var boundRect = (svgComp) ? svgComp.getBoundingClientRect() : chartContainer.getBoundingClientRect();
@ -552,6 +577,11 @@ window.nv.tooltip.* also has various helper methods.
return nvtooltip; return nvtooltip;
}; };
//Returns tooltipElem...not able to set it.
nvtooltip.tooltipElem = function() {
return tooltipElem;
};
nvtooltip.contentGenerator = function(_) { nvtooltip.contentGenerator = function(_) {
if (!arguments.length) return contentGenerator; if (!arguments.length) return contentGenerator;
if (typeof _ === 'function') { if (typeof _ === 'function') {

12
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
src/nv.d3.css
Unescape Escape View File

@ -99,10 +99,8 @@
} }
.nvtooltip table td { .nvtooltip table td {
padding-right: 9px; padding: 2px 9px 2px 0;
padding-bottom: 5px;
vertical-align: middle; vertical-align: middle;
} }
.nvtooltip table td.key { .nvtooltip table td.key {
@ -120,13 +118,10 @@
} }
.nvtooltip .footer { .nvtooltip .footer {
background-color: rgba(210, 231, 249, 0.35);
padding: 3px; padding: 3px;
text-align: center;
} }
.nvtooltip tr.highlight {
background-color: #eee;
}
.nvtooltip-pending-removal { .nvtooltip-pending-removal {
position: absolute; position: absolute;

68
src/tooltip.js
Unescape Escape View File

@ -44,6 +44,7 @@ window.nv.tooltip.* also has various helper methods.
, fixedTop = null //If not null, this fixes the top position of the tooltip. , fixedTop = null //If not null, this fixes the top position of the tooltip.
, classes = null //Attaches additional CSS classes to the tooltip DIV that is created. , classes = null //Attaches additional CSS classes to the tooltip DIV that is created.
, chartContainer = null //Parent DIV, of the SVG Container that holds the chart. , chartContainer = null //Parent DIV, of the SVG Container that holds the chart.
, tooltipElem = null //actual DOM element representing the tooltip.
, position = {left: null, top: null} //Relative position of the tooltip inside chartContainer. , position = {left: null, top: null} //Relative position of the tooltip inside chartContainer.
, enabled = true //True -> tooltips are rendered. False -> don't render tooltips. , enabled = true //True -> tooltips are rendered. False -> don't render tooltips.
//Generates a unique id when you create a new tooltip() object //Generates a unique id when you create a new tooltip() object
@ -70,27 +71,51 @@ window.nv.tooltip.* also has various helper methods.
if (d == null) return ''; if (d == null) return '';
var html = "<table><thead><tr><td colspan='3'><strong class='x-value'>" + headerFormatter(d.value) + "</strong></td></tr></thead><tbody>"; var table = d3.select(document.createElement("table"));
if (d.series instanceof Array) { var theadEnter = table.selectAll("thead")
d.series.forEach(function(item, i) { .data([d])
if (item.highlight) { .enter().append("thead");
html += "<tr class='highlight'>"; theadEnter.append("tr")
} .append("td")
else { .attr("colspan",3)
html += "<tr>"; .append("strong")
} .classed("x-value",true)
.text(headerFormatter(d.value));
html += "<td class='legend-color-guide'><div style='background-color: " + item.color + ";'></div></td>";
html += "<td class='key'>" + item.key + " </td>"; var tbodyEnter = table.selectAll("tbody")
html += "<td class='value'>" + valueFormatter(item.value,i) + "</td></tr>"; .data([d])
}); .enter().append("tbody");
} var trowEnter = tbodyEnter.selectAll("tr")
html += "</tbody>"; .data(function(p) { return p.series})
html += "</table>"; .enter()
.append("tr")
.classed("highlight", function(p) { return p.highlight})
;
trowEnter.append("td")
.classed("legend-color-guide",true)
.append("div")
.style("background-color", function(p) { return p.color});
trowEnter.append("td")
.classed("key",true)
.text(function(p) {return p.key});
trowEnter.append("td")
.classed("value",true)
.text(function(p,i) { return valueFormatter(p.value,i) });
trowEnter.selectAll("td").each(function(p) {
if (p.highlight)
d3.select(this)
.style("border-bottom","solid 1px " + p.color)
.style("border-top","solid 1px " + p.color)
;
});
var html = table.node().outerHTML;
if (d.footer !== undefined) if (d.footer !== undefined)
html += "<div class='footer'>" + d.footer + "</div>"; html += "<div class='footer'>" + d.footer + "</div>";
return html; return html;
}; };
var dataSeriesExists = function(d) { var dataSeriesExists = function(d) {
@ -154,7 +179,7 @@ window.nv.tooltip.* also has various helper methods.
var left = position.left; var left = position.left;
var top = (fixedTop != null) ? fixedTop : position.top; var top = (fixedTop != null) ? fixedTop : position.top;
var container = getTooltipContainer(contentGenerator(data)); var container = getTooltipContainer(contentGenerator(data));
tooltipElem = container;
if (chartContainer) { if (chartContainer) {
var svgComp = chartContainer.getElementsByTagName("svg")[0]; var svgComp = chartContainer.getElementsByTagName("svg")[0];
var boundRect = (svgComp) ? svgComp.getBoundingClientRect() : chartContainer.getBoundingClientRect(); var boundRect = (svgComp) ? svgComp.getBoundingClientRect() : chartContainer.getBoundingClientRect();
@ -197,6 +222,11 @@ window.nv.tooltip.* also has various helper methods.
return nvtooltip; return nvtooltip;
}; };
//Returns tooltipElem...not able to set it.
nvtooltip.tooltipElem = function() {
return tooltipElem;
};
nvtooltip.contentGenerator = function(_) { nvtooltip.contentGenerator = function(_) {
if (!arguments.length) return contentGenerator; if (!arguments.length) return contentGenerator;
if (typeof _ === 'function') { if (typeof _ === 'function') {

Write Preview
Loading…
Cancel
Save