如何使用Plotly更改X轴上的悬停文本

如何使用Plotly更改X轴上的悬停文本

本文介绍了如何使用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 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轴上的悬停文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-26 07:17