使用networkD3高亮显示sankey图从头到尾的所有连接路径
使用networkD3高亮显示sankey图从头到尾的所有连接路径
提问于 2018-12-19 19:24:19
我想使用R中的networkD3包和答案中的"highlight_node_links“函数生成一个Sankey图，该包具有此问题中描述的功能：
d3 Sankey - Highlight all connected paths from start to end
我是一个同时使用R和Javascript的初学者，我的问题是我不能让上面的javascript函数与我的R代码一起工作。我也检查了Highlight all connected paths from start to end in Sankey graph using R问题，但不幸的是我也不能根据那里的答案来解决它。我知道我需要使用htmlwidgets::onRender，但不知道如何使用。
一个小样本数据及其生成的网络：
links = data.frame(source = c("me", "you", "she", "p1", "p1", "p2", "p2"), target = c("p1", "p2", "p1", "p2", "b1", "b1", "b2"), weight = c(20, 10, 30, 40, 60, 50, 50))
nodes <- data.frame(name = c(links$source, links$target) %>% unique())
links$IDsource = match(links$source, nodes$name)-1
links$IDtarget = match(links$target, nodes$name)-1
sn <- sankeyNetwork(Links = links,
Nodes = nodes,
Source = "IDsource",
Target = "IDtarget",
Value = "weight",
NodeID = "name",
sinksRight = TRUE)以及我尝试包含highlight_node_links函数的方式(我之前在上面的链接中定义了该函数)：
htmlwidgets::onRender(
sn,
'
function(el, x) {
var link = d3.selectAll(".link");
var node = d3.selectAll(".node");
node.on("mousedown.drag", null);
node.on("click",highlight_node_links);
function highlight_node_links(node,i){
var remainingNodes=[],
nextNodes=[];
var stroke_opacity = 0;
if( d3.select(this).attr("data-clicked") == "1" ){
d3.select(this).attr("data-clicked","0");
stroke_opacity = 0.2;
}else{
d3.select(this).attr("data-clicked","1");
stroke_opacity = 0.5;
}
var traverse = [{
linkType : "sourceLinks",
nodeType : "target"
},{
linkType : "targetLinks",
nodeType : "source"
}];
traverse.forEach(function(step){
node[step.linkType].forEach(function(link) {
remainingNodes.push(link[step.nodeType]);
highlight_link(link.id, stroke_opacity);
});
while (remainingNodes.length) {
nextNodes = [];
remainingNodes.forEach(function(node) {
node[step.linkType].forEach(function(link) {
nextNodes.push(link[step.nodeType]);
highlight_link(link.id, stroke_opacity);
});
});
remainingNodes = nextNodes;
}
});
}
function highlight_link(id,opacity){
d3.select("#link-"+id).style("stroke-opacity", opacity)
}}'
)回答 1
Stack Overflow用户
发布于 2018-12-19 20:02:39
当我运行你的代码时，我得到了警告信息...
Warning message:
It looks like Source/Target is not zero-indexed. This is required in JavaScript
and so your plot may not render.告诉你问题的根源是什么.您的links和nodes数据框未正确创建。
通过将stringsAsFactors = FALSE作为参数添加到用于创建links数据框的data.frame命令中，可以很容易地解决此问题。
工作示例...
library(networkD3)
library(htmlwidgets)
library(dplyr)
links = data.frame(
source = c("me", "you", "she", "p1", "p1", "p2", "p2"),
target = c("p1", "p2", "p1", "p2", "b1", "b1", "b2"),
weight = c(20, 10, 30, 40, 60, 50, 50),
stringsAsFactors = FALSE
)
nodes <-
data.frame(name = c(links$source, links$target) %>% unique())
links$IDsource = match(links$source, nodes$name) - 1
links$IDtarget = match(links$target, nodes$name) - 1
sn <- sankeyNetwork(
Links = links,
Nodes = nodes,
Source = "IDsource",
Target = "IDtarget",
Value = "weight",
NodeID = "name",
sinksRight = TRUE
)
htmlwidgets::onRender(
sn,
'
function(el, x) {
var link = d3.selectAll(".link");
var node = d3.selectAll(".node");
node.on("mousedown.drag", null);
node.on("click",highlight_node_links)}'
)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53850226
复制相关文章
相似问题
腾讯云开发者
