NVD3 工具提示错误
NVD3 tooltip bug
我能够解决问题:
var that = this;
chart.tooltip.contentGenerator(function (d) {
var html = "<div>";
d.series.forEach(function(elem){
Object.keys(data_obj).forEach(function(key_1) {
var outer_obj = data_obj[key_1];
if (outer_obj["key"] === elem.key) {
that.showBarChart(elem.key);
var expr = outer_obj["values"][0]["expr"];
html += "<p>" + elem.key + "</p>";
html += "<p>x = " + d.value + ", y = " + elem.value + "</p>";
}
});
})
html += "</div>";
return html;
});
但是,该解决方案在 nvd3
scatterChart
中导致了一个非常奇怪的错误,当时 tooltip
没有在 mouse out
上消失并且只是停留在页面上。
我该如何解决?
问题是在 componentDidUpdate
我打电话给 createScatterChart
。我将其注释掉,它开始正常工作。它的发生显然是因为 React
我发现在问题中描述的工作流程:
componentDidMount() {
this.createScatterChart()
}
componentDidUpdate() {
//this.createScatterChart()
}
Calling this.setState() within the component. This will trigger the following component lifecycle methods shouldComponentUpdate > componentWillUpdate > render > componentDidUpdate
我能够解决问题:
var that = this;
chart.tooltip.contentGenerator(function (d) {
var html = "<div>";
d.series.forEach(function(elem){
Object.keys(data_obj).forEach(function(key_1) {
var outer_obj = data_obj[key_1];
if (outer_obj["key"] === elem.key) {
that.showBarChart(elem.key);
var expr = outer_obj["values"][0]["expr"];
html += "<p>" + elem.key + "</p>";
html += "<p>x = " + d.value + ", y = " + elem.value + "</p>";
}
});
})
html += "</div>";
return html;
});
但是,该解决方案在 nvd3
scatterChart
中导致了一个非常奇怪的错误,当时 tooltip
没有在 mouse out
上消失并且只是停留在页面上。
我该如何解决?
问题是在 componentDidUpdate
我打电话给 createScatterChart
。我将其注释掉,它开始正常工作。它的发生显然是因为 React
我发现在问题中描述的工作流程:
componentDidMount() {
this.createScatterChart()
}
componentDidUpdate() {
//this.createScatterChart()
}
Calling this.setState() within the component. This will trigger the following component lifecycle methods shouldComponentUpdate > componentWillUpdate > render > componentDidUpdate