SVG and D3 Title elements

Canvas Canvas Questions
1

Got a general question regarding the title element in a D3 chart.

The title is actually the roll over (tool tip) element in a chart. The below snippit of code will produce a 5 line roll over.

.append("svg:title").html(function(d) {return d.name+'\n Budget Amount : '+ numberWithCommas(d.budgetAmount)+'\n Actual Amount : '+numberWithCommas(d.actualAmount)+'\n Variance : '+numberWithCommas(d.variance)+'\n Variance to Budget: '+d.varianceToBudget.toFixed(0)+'%'});

This code work fine in Chrome, however does not work at all in IE. To get this to work in IE, I need to change .html to .text

Once I do this I can see the tool tip, problem is IE ignores the \n designed to cause a new line. The text only wraps when it gets to the end of the container.

I there a nice way to get IE to wrap text in a title element.

Brian

2

Hi @bknott,

Have you tried using HTML markups instead? Like <br /> instead of \n.

–
Paul

3

Yes tried that as well. If I have \n, IE ignores it but does not display it. If I have
IE displays the tag as part of the text.

I assume IE is not display the \n because the \ is an escape character.

I think because I am using .text , both IE and Chrome render the tag in the tool tip. If I use .html it works for Chrome, but IE shown nothing at all.

Brian

4

Hi @bknott,

There are a lot of discussions on this and as to how IE decides to handle it in the end, especially with the older non-Edge versions.

Might be a better approach for now to research on handling it differently, i.e. via mousetip/mouseover events, d3-tooltips, nvd3-tooltips, etc. which should be able to give you the flexibility you need.

–
Paul