Google 图表：将 Sankey.node.label 设置为 HTML link

Question

我使用的是 Google 图表中的桑基图表，我已经想出在工具提示功能中使用 html，但我不太清楚如何调整它，所以该图的其他特征也可以使用 html 特征。

理想情况下，我希望将 Sankey.node.label 元素设置为能够 link 到网站上的其他页面....

我试过

  data.addColumn({'type':'string', 'role': 'From', 'p': {'html': true} });

和

   From: { isHtml:true }

但它们似乎不起作用。建议表示赞赏！

Answer 1

虽然我确实设法使用 jQuery 和 Javascript 使它工作了一些，但它从未获得我想要的全部功能，所以我放弃了使用 Sankey。但是如果有人想知道如何将 sankey.node.label 设置为 html link，这是我的解决方案：

$(document).ready(function() {
setTimeout(function(){
// Selects SVG TAG and ADDS LINK FUNCTIONALITY
var svgtag = document.querySelector("#sankey_multiple > div > div:nth-child(1) > div > svg")
$(svgtag).attr("xmlns:xlink", "http://www.w3.org/1999/xlink")

var linkNode = document.querySelector("#sankey_multiple > div > div:nth-child(1) > div > svg > g:nth-child(3) > text:nth-child(1)")
$(linkNode).wrap( "<a xlink:href='examplelinkone.com'></a>" )

var linkNode = document.querySelector("#sankey_multiple > div > div:nth-child(1) > div > svg > g:nth-child(3) > text:nth-child(3)")
$(linkNode).wrap( "<a xlink:href='examplelinktwo.com'></a>" )

$("#sankey_multiple").html($("#sankey_multiple").html());

}, 500);
});

首先，我们必须将 xlink 添加到 SVG 标签中，以使 svg 的文本标签具有 link 的功能。之后我们可以用 xlink 将 svg 中的 linkNode 包装到所需的 URL。

但是，在此之后，我们仍然必须重新实例化 SVG 绘图才能在页面上进行 links 更新。这个想法是"refresh the whole svg"（如这里所建议的：jquery's append not working with svg element?）：

    $("#svgid").html($("#svgid").html());

所以在这一点上，我会在页面加载后 100 毫秒调用它，这样 link 就会在所有内容加载时就位。这工作正常，links 已加载并且可以跟随。

但是这样做 "refresh" 只是重写了 Sankey 并覆盖了工具提示功能等其他东西。这就是我认为这变得不守规矩的地方，并决定采取不同的策略。

希望这可能会给其他人一些最终如何使用它的想法！

Google 图表：将 Sankey.node.label 设置为 HTML link

Google Charts: Setting Sankey.node.label as HTML link

svg

google-visualization