sankey plot displays '<br>' instead of a line break in tooltip on hover #175
Comments
|
can you give an example |
|
so something like this: |
|
@christophergandrud looks like PR #152 will resolve this |
|
Definitely worth a shot. Have you tested out the pull request (I can't remember the lineage of that request, but there seems to have been some strangeness before--sorry very vague--). |
|
I have not reviewed the PR (as in actually tested it), nor do I know its lineage, but the change is so minor that it seems unlikely to break anything. It changes line 180 from .text(function(d) { return d.name + "<br>" + format(d.value) + to .text(function(d) { return d.name + "\n" + format(d.value) + however, it's referred to as line 184 in the PR/commit... I don't know why there's a discrepancy with that |
cjyetman
changed the title
|
@christophergandrud your memory serves you well... there was some weirdness with this (see this comment in #130 for some detail... possible cross platform incompatibility... I will have to investigate further. Seems really odd though... the title attribute is a very basic HTML attribute that's been around for a long time. I can't imagine how there would be an incompatibility unless one of the browsers has some foolish special behavior. It is on an SVG element as opposed to an HTML element, so maybe that has something to do with it. |
|
After way too much time experimenting with such a trivial thing, I've come to the conclusion that wrapping the title text in a I can't test this on so many OS/browser combinations, nor do I have the inclination to, but if we could get verification that the tooltip shows on two lines using the following HTML on a wide set of browsers (particularly for those reporting this and similar issues), then this may be a solution. <!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg id="chart" width=200 height=200></svg>
<script type="text/javascript">
d3.select("#chart")
.append("circle")
.attr("r", 50)
.append("title")
.append("foreignObject")
.append("xhtml:body")
.html("<pre>FIRST LINE\nSECOND LINE</pre>")
</script>
</body>
</html> |
|
I made a branch that hopefully fixes this issue on a wide spectrum of browsers. Testing on numerous browser and OS combinations would be highly appreciated. Please let us know if you've tested this dev branch with a specific browser version and OS version and the multiline tooltips work as expected for both the nodes and the links, or not. install the dev branch with... devtools::install_github('cjyetman/networkD3', ref = 'sankey-title-tooltips-in-%3Cpre%3E')and test with... library(networkD3)
energy <- jsonlite::fromJSON('https://cdn.rawgit.com/christophergandrud/networkD3/master/JSONdata/energy.json')
sankeyNetwork(Links = energy$links, Nodes = energy$nodes, Source = 'source',
Target = 'target', Value = 'value', NodeID = 'name', units = 'TWh')if this works, it should resolve this issue #175 and #146 and should supersede PR #152, as well as address one of the issues with PR #130 |
|
That's awesome. Thanks for all of your work @cjyetman! Feel free to merge whenever. |
|
this is resolved by PR #180... closing |
"
" appears in the text, when it should break the text into separate lines
The text was updated successfully, but these errors were encountered: