Comments (6)
{networkD3} has a hardcoded formatting option set inside of its JavaScript. You can reset it to be whatever you want using the example answer you linked to... critically setting the format option in the .format(",.2f")
bit, where in this case the 2 means print two digits after the decimal point.
library(networkD3)
library(htmlwidgets)
nodes <- data.frame(name = c('a','b'))
links <- data.frame(source = 0, target = 1, value = 0.34)
p <- sankeyNetwork(
Links = links,
Source = "source",
Target = "target",
Value = "value",
Nodes = nodes,
NodeID = "name",
fontSize = 12,
nodeWidth = 30,
iterations = 0
)
customJS <- '
function(el,x) {
var link = d3.selectAll(".link");
var format = d3.formatLocale({"decimal": ",", "thousands": ".", "grouping": [3], "currency": ["", "\u00a0€"]}).format(",.2f");
link.select("title").select("body")
.html(function(d) { return "<pre>" + d.source.name + " \u2192 " + d.target.name +
"\\n" + format(d.value) + "<pre>"; });
}
'
onRender(p, customJS)
from networkd3.
Hello and thank you for your quick reply @cjyetman
I believe I found a similar approach to yours somewhere on stackoverflow already.
The thing is that this approach does only change the format of the links, while it also removes the unit sign.
E.g. node before: 12 %, node after: 12 %; link before: 12 %, link after: 11,52.
What I need: Link/Node after 11.52 %
from networkd3.
If you provide a working reproducible example, then someone might be able to give you exactly what you want.... otherwise we're just making guesses about what you precisely want.
from networkd3.
Here is the reproducible example containing the issues as explained above:
library(networkD3)
library(htmlwidgets)
nodes <- data.frame(name = c('a','b','c','a','b','c'))
links <- data.frame(source = c(0,1,2,0,1,2), target = c(3,4,5,4,5,3), value = c(0.36,0.49,0.61,0.12,0.76,0.15))
p <- sankeyNetwork(
Links = links,
Source = "source",
Target = "target",
Value = "value",
Nodes = nodes,
NodeID = "name",
fontSize = 12,
nodeWidth = 30,
iterations = 0,
units = "%"
)
customJS <- '
function(el,x) {
var link = d3.selectAll(".link");
var format = d3.formatLocale({"decimal": ",", "thousands": ".", "grouping": [3], "currency": ["", "\u00a0€"]}).format(",.2f");
link.select("title").select("body")
.html(function(d) { return "<pre>" + d.source.name + " \u2192 " + d.target.name +
"\\n" + format(d.value) + "<pre>"; });
}
'
onRender(p, customJS)
from networkd3.
The formats possible with D3 are specified here https://github.com/d3/d3-format/tree/v3.1.0#locale_format
If you want to format a value as a percentage, use d3.format("%")
... that will format a value of 0.36
as "36.000000%"
If you want to restrict the number of digits beyond the decimal point, use something like d3.format(".2%")
... that will format a value of 0.36
as "36.00%"
, or 0.1152
as "11.52%"
If you want to format the title text for the nodes, then you'll have to apply the formatting to the nodes also...
library(networkD3)
library(htmlwidgets)
nodes <- data.frame(name = c('a','b','c','a','b','c'))
links <- data.frame(source = c(0,1,2,0,1,2), target = c(3,4,5,4,5,3), value = c(0.36,0.49,0.61,0.12,0.76,0.15))
p <- sankeyNetwork(
Links = links,
Source = "source",
Target = "target",
Value = "value",
Nodes = nodes,
NodeID = "name",
fontSize = 12,
nodeWidth = 30,
iterations = 0,
units = "%"
)
customJS <- '
function(el,x) {
var format = d3.format(".2%");
d3.select(el)
.selectAll(".link")
.select("title")
.select("body")
.html(d => format(d.value));
d3.select(el)
.selectAll(".node")
.select("title")
.select("body")
.html(d => format(d.value));
}
'
onRender(p, customJS)
from networkd3.
Thank you so much!
To include the Link and Node names (as default) when hovering and also to add a space between the number and the % sign I changed the customJS code accordingly:
customJS <- '
function(el,x) {
var format = d3.format(".2f");
d3.select(el)
.selectAll(".link")
.select("title")
.select("body")
.html(function(d) { return "<pre>" + d.source.name + " \u2192 " + d.target.name +
"\\n" + format(d.value) + " %" + "<pre>"; });
d3.select(el)
.selectAll(".node")
.select("title")
.select("body")
.html(function(d) { return "<pre>" + d.name +
"\\n" + format(d.value) + " %" + "<pre>"; });
}
'
from networkd3.
Related Issues (20)
- Add arrowheads to sankey diagram links HOT 1
- Center network in rmarkdown slides HOT 3
- Count in boxes instead of using tooltip in R HOT 4
- Line Break in radialNetwork HOT 1
- `check_zero()` causes `sankeyNetwork()` and `forceNetwork()` to fail silently on specific inputs
- convert examples to use curl package HOT 2
- Add count of nodes to the node label
- Return position/order of nodes HOT 2
- Nodes Font Color HOT 3
- how to fix incorrect color for nodes in networkD3 (sankeyNetwork)? HOT 1
- Freeze Force Network HOT 9
- as_treenetdf() and treeNetwork() are not exported, but their help files are available HOT 1
- Node IDs with spaces cause issues assigning color HOT 1
- forceNetwork gets laggy as number of nodes gets larger HOT 2
- New release on CRAN HOT 4
- set xpos per species HOT 1
- "An error has occurred!" displayed after publish rshiny HOT 3
- Save output image as SVG format HOT 3
- Target Font-size for mouseover transition is hardcoded
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from networkd3.