如何使用Plotly更改X轴上的悬停文本 [英] How can I change the hover text on the x-axis using Plotly

问题描述

我想更改在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 outer path 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轴上的悬停文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！