本文介绍了如何使用Plotly更改X轴上的悬停文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想更改在x轴上显示的悬停文本.我知道我可以使用
I would like to change the hover text that is displayed on the x-axis. I know I can change the hover text of the bar using js below
var trace1 = {
x: [0, 1, 2, 3],
y: [10, 11, 21, 31],
text: ["Zero", "One", "Two", "Three"],
type: 'bar'
};
var data = [trace1];
var layout = {barmode: 'stack'};
Plotly.newPlot('myDiv', data, layout);
那么,如何更改x轴的悬停文字?即2
显示为Two
.
So how do I change the hover text for the x axis? i.e. have the 2
display as Two
.
推荐答案
- 可以在类
axistext
的文本元素中找到x轴的悬停信息. - 一个人可以通过使用新文本作为参数调用
text()
来覆盖其文本 - 问题在于Plotly将再次更新文本,而新旧文本将闪烁
- 解决方案是克隆
text
元素并将其移至前景 - 下一个问题是大小是x值而不是文本值.此处的解决方案是
transform
外部path
元素. - The hover info for the x-axis can be found in the class
axistext
in its text element. - One can overwrite its text by calling
text()
with the new text as the parameter - The problem is that Plotly will update the text again and the old and new text will flicker
- The solution is cloning the
text
element and move it to the foreground - Next problem is that the size is for x-values and not for the text-values. The solution here is to
transform
the outerpath
element.
var trace1 = {
x: [0, 1, 2, 3],
y: [10, 11, 21, 31],
text: ["Zero", "One", "Two", "Three"],
type: "bar"
};
var data = [trace1];
var layout = {barmode: "stack"};
Plotly.newPlot("myDiv", data, layout);
document.getElementById("myDiv").on("plotly_hover", function (data) {
//get correct text from trace1
var infotext = data.points.map(function (d) {
return (trace1.text[d.pointNumber]);
});
//select the old x-axis info text
var x_infotext = Plotly.d3.selectAll(".axistext").selectAll("text");
//duplicate the x-axis info text
var attr = x_infotext.node().attributes;
var attr_length = attr.length;
var node_name = x_infotext.property("nodeName");
var parent = Plotly.d3.select(x_infotext.node().parentNode);
var cloned = parent.append(node_name)
.attr("id", "real_axistext");
var j = 0;
for (j = 0; j < attr_length; j += 1) {
if (attr[j].nodeName !== "id") {
cloned.attr(attr[j].name, attr[j].value);
}
}
//rescale the new info text
Plotly.d3.selectAll(".axistext").selectAll("path").node().setAttribute("transform", "scale(5,1)");
//assign the correct text to the next x-axis info text
cloned.text(infotext);
cloned.style("opacity", 1);
//hide the old info text
x_infotext.style("opacity", 0);
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 480px; height: 400px;">
这篇关于如何使用Plotly更改X轴上的悬停文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!