我想使用Sankey绘图,其中悬停信息是在每个 node 的基础上定制的.我希望能够使用带有字符串列表的悬停模板.不幸的是,这导致根本没有显示悬停信息.

我使用了文档中的basic Sankey example,并添加了一个名为hover模板的新参数:

var data = {
  type: "sankey",
  orientation: "h",
  node: {
    pad: 15,
    thickness: 30,
    line: {
      color: "black",
      width: 0.5,
    },
    label: ["A1", "A2", "B1", "B2", "C1", "C2"],
    color: ["blue", "blue", "blue", "blue", "blue", "blue"],
    hovertemplate: ["a", "b", "c", "d", "e", "f"],  \\ This is the only difference to the docs
  },

  link: {
    source: [0, 1, 0, 2, 3, 3],
    target: [2, 3, 3, 4, 4, 5],
    value: [8, 4, 2, 8, 4, 2],
  },
};

var data = [data];

var layout = {
  title: "Basic Sankey",
  font: {
    size: 10,
  },
};

Plotly.react("myDiv", data, layout);

我预计这会显示相应的字母作为悬停信息.不幸的是,根本没有显示任何悬停信息.

作为简短的健全性判断,我将数组替换为简单的字符串"a",这将导致所有 node 的悬停状态仅显示a的预期结果.

推荐答案

到目前为止(2023年8月),与documentation所说的相反,将字符串数组设置为hovertemplate不适用于Sankey node /链接(它也不适用于热图以及可能许多其他跟踪类型.不过,它确实适用于散布和条形痕迹).

相反,您可以做的是添加customdata,然后您可以在hovertemplate中引用'%{customdata}'.

customdata- for each 基准指定额外数据.这在以下情况下可能很有用 收听悬停、点击和 Select 事件.

var data = {
  type: "sankey",
  orientation: "h",
  node: {
    pad: 15,
    thickness: 30,
    line: {
      color: "black",
      width: 0.5,
    },
    label: ["A1", "A2", "B1", "B2", "C1", "C2"],
    color: ["blue", "blue", "blue", "blue", "blue", "blue"],
    customdata: ["a", "b", "c", "d", "e", "f"], 
    hovertemplate: '%{customdata}'
  },

  link: {
    source: [0, 1, 0, 2, 3, 3],
    target: [2, 3, 3, 4, 4, 5],
    value: [8, 4, 2, 8, 4, 2],
  },
};

var data = [data];

var layout = {
  title: "Basic Sankey",
  font: {
    size: 10,
  },
};

Plotly.react("myDiv", data, layout);

请注意,您还可以将定制数据添加到链接,并设置它们的悬停模板,就像 node 一样.

Javascript相关问答推荐

用相器进行向内碰撞检测

如何在不分配整个数组的情况下修改包含数组的行为主体?

Vega中的模运算符

通过在页面上滚动来移动滚动条

如何在Javascript中使用Go和检索本地托管Apache Arrow Flight服务器?

空的结果抓取网站与Fetch和Cheerio

未捕获错误:[]:getActivePinia()被调用,但没有活动Pinia.🍍""在调用app.use(pinia)之前,您是否try 使用store ?""

如何添加绘图条形图图例单击角形事件

Chart.js 4.4.2,当悬停在一个数据点上时,如何在工具提示中拥有多个数据点/标签?

如何解决useState错误—setSelect Image不是函数''

XSLT处理器未运行

我可以使用空手道用户界面来获取网页的当前滚动位置吗?

MarkLogic-earch.suggest不返回任何值

如何在DYGRAPS中更改鼠标事件和键盘输入

判断函数参数的类型

postman 预请求中的hmac/sha256内标识-从js示例转换

我怎样才能点击一个元素,并获得一个与 puppeteer 师导航页面的URL?

固定动态、self 调整的优先级队列

表单数据中未定义的数组键

带元素数组的Mongo聚合