Google Charts:设置Sankey.node.label为HTML链接

Question

我使用的是Google Charts中的Sankey Chart，我已经知道在工具提示功能中使用html，但我不太清楚如何调整它，以便图表的其他功能也可以使用html功能。

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

我试过

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

和

   From: { isHtml:true }

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

Answer 1

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

$(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的文本标记充当链接。之后，我们可以将linkNode包装在svg中，并使用指向所需URL的xlink。

但是，在此之后，为了使页面上的链接更新，我们仍然必须重新建立SVG绘图。这个想法是"刷新整个svg"(如这里所建议的:jquery's append不与svg元素一起工作?):

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

所以在这一点上，我将在页面加载后100ms调用它，这样当所有内容加载时链接就会到位。这工作得很好，链接被加载并且是可跟踪的。

但是做这个"刷新"只是重写Sankey和覆盖其他东西，比如工具提示功能。这时我觉得这有点不守规矩了，于是决定另辟蹊径。

希望这可能会给别人一些想法，如何与这个工作最终虽然!