[英]How can I change the font size of link labels to a Sankey Diagram built with networkd3 in R?
I was trying to add link labels to a sankey diagram as described by CJ Yetman in:我试图将链接标签添加到 sankey 图中,如 CJ Yetman 所述:
In R, how to display value on the links/paths of Sankey Graph? 在 R 中,如何在 Sankey Graph 的链接/路径上显示值?
library(htmlwidgets)
library(networkD3)
nodes <- data.frame(name = c("Node A", "Node B", "Node C", "Node D"))
links <- data.frame(
source = c(0, 0, 1, 2),
target = c(1, 2, 3, 3),
value = c(10, 20, 30, 40))
p <- sankeyNetwork(
Links = links, Nodes = nodes,
Source = "source", Target = "target",
Value = "value", NodeID = "name",
fontSize = 20, nodeWidth = 30)
htmlwidgets::onRender(p, '
function(el) {
var nodeWidth = this.sankey.nodeWidth();
var links = this.sankey.links();
links.forEach((d, i) => {
var startX = d.source.x + nodeWidth;
var endX = d.target.x;
var startY = d.source.y + d.sy + d.dy / 2;
var endY = d.target.y + d.ty + d.dy / 2;
d3.select(el).select("svg g")
.append("text")
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.attr("x", startX + ((endX - startX) / 2))
.attr("y", startY + ((endY - startY) / 2))
.text(d.value);
})
}
')
Now I want to change the font size of the labels.现在我想更改标签的字体大小。 Also I would like to add axis labels and change the node labels to vertical labels .
另外我想添加轴标签并将节点标签更改为垂直标签。
You can change the font size of link labels by adding .style("font-size", "34px")
to the end of the JavaScript/D3 chain...您可以通过将
.style("font-size", "34px")
添加到 JavaScript/D3 链的末尾来更改链接标签的字体大小...
htmlwidgets::onRender(p, '
function(el) {
var nodeWidth = this.sankey.nodeWidth();
var links = this.sankey.links();
links.forEach((d, i) => {
var startX = d.source.x + nodeWidth;
var endX = d.target.x;
var startY = d.source.y + d.sy + d.dy / 2;
var endY = d.target.y + d.ty + d.dy / 2;
d3.select(el)
.select("svg g")
.append("text")
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.attr("x", startX + ((endX - startX) / 2))
.attr("y", startY + ((endY - startY) / 2))
.text(d.value)
.style("font-size", "34px");
})
}')
You can add axis labels with something like this (originally from How to add columnn titles in a Sankey chart networkD3 )...您可以使用类似这样的方式添加轴标签(最初来自如何在桑基图 networkD3 中添加列标题)...
htmlwidgets::onRender(p, '
function(el) {
var cols_x = this.sankey.nodes()
.map(d => d.x).filter((v, i, a) => a.indexOf(v) === i)
.sort(function(a, b){return a - b});
cols_x.forEach((d, i) => {
d3.select(el).select("svg")
.append("text")
.attr("x", d)
.attr("y", 12)
.text("Step " + (i + 1));
})
}
')
You can make the node labels vertically with something like this (originally from Can I rotate the node labels in a Sankey Plot (networkD3::sankeyNetwork)? )...您可以使用类似这样的方式垂直制作节点标签(最初来自Can I rotate the node labels in a Sankey Plot (networkD3::sankeyNetwork)? )...
htmlwidgets::onRender(p, '
function(el) {
d3.select(el)
.select("svg")
.selectAll(".node text")
.attr("text-anchor", "middle")
.style("writing-mode", "vertical-rl")
.style("text-orientation", "upright");
}
')
and you can string them all together like this...你可以像这样把它们串在一起......
htmlwidgets::onRender(p, '
function(el) {
// set link label font size
var nodeWidth = this.sankey.nodeWidth();
var links = this.sankey.links();
links.forEach((d, i) => {
var startX = d.source.x + nodeWidth;
var endX = d.target.x;
var startY = d.source.y + d.sy + d.dy / 2;
var endY = d.target.y + d.ty + d.dy / 2;
d3.select(el)
.select("svg g")
.append("text")
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.attr("x", startX + ((endX - startX) / 2))
.attr("y", startY + ((endY - startY) / 2))
.text(d.value)
.style("font-size", "34px");
})
// set node text vertical
d3.select(el)
.select("svg")
.selectAll(".node text")
.attr("text-anchor", "middle")
.style("writing-mode", "vertical-rl")
.style("text-orientation", "upright");
// set x-axis labels
var cols_x = this.sankey.nodes()
.map(d => d.x).filter((v, i, a) => a.indexOf(v) === i)
.sort(function(a, b){return a - b});
cols_x.forEach((d, i) => {
d3.select(el).select("svg")
.append("text")
.attr("x", d)
.attr("y", 12)
.text("Step " + (i + 1));
})
}
')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.