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)
.barColor(d3.scale.category20().range())
.transitionDuration(250)
.showControls(true);
.stacked(true)
//.showControls(false);
chart.yAxis
.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.
, 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.
, tooltipElem = null //actual DOM element representing the tooltip.
, position = {left: null, top: null} //Relative position of the tooltip inside chartContainer.
, enabled = true //True -> tooltips are rendered. False -> don't render tooltips.
//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 '';
var html = "<table><thead><tr><td colspan='3'><strong class='x-value'>" + headerFormatter(d.value) + "</strong></td></tr></thead><tbody>";
if (d.series instanceof Array) {
d.series.forEach(function(item, i) {
if (item.highlight) {
html += "<tr class='highlight'>";
}
else {
html += "<tr>";
}
html += "<td class='legend-color-guide'><div style='background-color: " + item.color + ";'></div></td>";
html += "<td class='key'>" + item.key + " </td>";
html += "<td class='value'>" + valueFormatter(item.value,i) + "</td></tr>";
});
}
html += "</tbody>";
html += "</table>";
var table = d3.select(document.createElement("table"));
var theadEnter = table.selectAll("thead")
.data([d])
.enter().append("thead");
theadEnter.append("tr")
.append("td")
.attr("colspan",3)
.append("strong")
.classed("x-value",true)
.text(headerFormatter(d.value));
var tbodyEnter = table.selectAll("tbody")
.data([d])
.enter().append("tbody");
var trowEnter = tbodyEnter.selectAll("tr")
.data(function(p) { return p.series})
.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)
html += "<div class='footer'>" + d.footer + "</div>";
return html;
};
var dataSeriesExists = function(d) {
@ -509,7 +534,7 @@ window.nv.tooltip.* also has various helper methods.
var left = position.left;
var top = (fixedTop != null) ? fixedTop : position.top;
var container = getTooltipContainer(contentGenerator(data));
tooltipElem = container;
if (chartContainer) {
var svgComp = chartContainer.getElementsByTagName("svg")[0];
var boundRect = (svgComp) ? svgComp.getBoundingClientRect() : chartContainer.getBoundingClientRect();
@ -552,6 +577,11 @@ window.nv.tooltip.* also has various helper methods.
return nvtooltip;
};
//Returns tooltipElem...not able to set it.
nvtooltip.tooltipElem = function() {
return tooltipElem;
};
nvtooltip.contentGenerator = function(_) {
if (!arguments.length) return contentGenerator;
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 {
padding-right: 9px;
padding-bottom: 5px;
padding: 2px 9px 2px 0;
vertical-align: middle;
}
.nvtooltip table td.key {
@ -120,13 +118,10 @@
}
.nvtooltip .footer {
background-color: rgba(210, 231, 249, 0.35);
padding: 3px;
text-align: center;
}
.nvtooltip tr.highlight {
background-color: #eee;
}
.nvtooltip-pending-removal {
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.
, 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.
, tooltipElem = null //actual DOM element representing the tooltip.
, position = {left: null, top: null} //Relative position of the tooltip inside chartContainer.
, enabled = true //True -> tooltips are rendered. False -> don't render tooltips.
//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 '';
var html = "<table><thead><tr><td colspan='3'><strong class='x-value'>" + headerFormatter(d.value) + "</strong></td></tr></thead><tbody>";
if (d.series instanceof Array) {
d.series.forEach(function(item, i) {
if (item.highlight) {
html += "<tr class='highlight'>";
}
else {
html += "<tr>";
}
html += "<td class='legend-color-guide'><div style='background-color: " + item.color + ";'></div></td>";
html += "<td class='key'>" + item.key + " </td>";
html += "<td class='value'>" + valueFormatter(item.value,i) + "</td></tr>";
});
}
html += "</tbody>";
html += "</table>";
var table = d3.select(document.createElement("table"));
var theadEnter = table.selectAll("thead")
.data([d])
.enter().append("thead");
theadEnter.append("tr")
.append("td")
.attr("colspan",3)
.append("strong")
.classed("x-value",true)
.text(headerFormatter(d.value));
var tbodyEnter = table.selectAll("tbody")
.data([d])
.enter().append("tbody");
var trowEnter = tbodyEnter.selectAll("tr")
.data(function(p) { return p.series})
.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)
html += "<div class='footer'>" + d.footer + "</div>";
return html;
};
var dataSeriesExists = function(d) {
@ -154,7 +179,7 @@ window.nv.tooltip.* also has various helper methods.
var left = position.left;
var top = (fixedTop != null) ? fixedTop : position.top;
var container = getTooltipContainer(contentGenerator(data));
tooltipElem = container;
if (chartContainer) {
var svgComp = chartContainer.getElementsByTagName("svg")[0];
var boundRect = (svgComp) ? svgComp.getBoundingClientRect() : chartContainer.getBoundingClientRect();
@ -197,6 +222,11 @@ window.nv.tooltip.* also has various helper methods.
return nvtooltip;
};
//Returns tooltipElem...not able to set it.
nvtooltip.tooltipElem = function() {
return tooltipElem;
};
nvtooltip.contentGenerator = function(_) {
if (!arguments.length) return contentGenerator;
if (typeof _ === 'function') {

Write Preview
Loading…
Cancel
Save