D3.js 如何重写NVD3库中的函数?
我的目标是覆盖NVD3用于工具提示内容的函数。 我找到了提供这种行为的函数:contentGenerator 下面是代码:D3.js 如何重写NVD3库中的函数?,d3.js,tooltip,nvd3.js,D3.js,Tooltip,Nvd3.js,我的目标是覆盖NVD3用于工具提示内容的函数。 我找到了提供这种行为的函数:contentGenerator 下面是代码: var contentGenerator = function(d) { if (content != null) { return content; } if (d == null) { return ''; } var table = d3
var contentGenerator = function(d) {
if (content != null) {
return content;
}
if (d == null) {
return '';
}
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)
.html(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)
.html(function(p) {return p.key});
trowEnter.append("td")
.classed("value",true)
.html(function(p,i) { return valueFormatter(p.value,i) });
trowEnter.selectAll("td").each(function(p) {
if (p.highlight) {
var opacityScale = d3.scale.linear().domain([0,1]).range(["#fff",p.color]);
var opacity = 0.6;
d3.select(this)
.style("border-bottom-color", opacityScale(opacity))
.style("border-top-color", opacityScale(opacity))
;
}
});
var html = table.node().outerHTML;
if (d.footer == undefined)
html += "<div class='footer'>" + d.footer + "</div>";
return html;
};
我怎样才能达到这个目标
我想定制:
1) 在标题中添加一个简单的文本
2) 添加页脚请参见或。是否尝试此操作?
var chart = nv.models.lineChart()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.useInteractiveGuideline(false)
.tooltipContent(function (key, x, y, e, graph) {
return contentGenerator
});