Line break in C3 generated SVG graph via JavaScript

Question

I need help generating a line break in html.

Javascript

var x = "jun"; var y = "2015"; var calculate= x + "<br>" + y; 

Html is returned as below

 <div>jan <br> 2015</div> 

expected result: I need a line break in html but should not display the <br> tag.

Update: I want "jan" in the first line and the next line "2015"

I use these values ​​in c3 chart x values.

JSFIDDLE

Thanks at Advance.

Answer 1

Your question was a bit inaccurate: you are using C3.js, which will generate the svg element.

So the markup returned was actually <tspan dx="0" dy=".71em" x="0">0&lt;br&gt;2014</tspan> .

C3 will use the textContent property for tspan to add the text content returned by your function.
As mentioned in other questions , you cannot add line breaks to <tspan> elements.

Thus, the solution effectively creates a new tspan directly below another, in the same <text> element.

Unfortunately, there is no way to get these exact elements, except by looping all the rest of the tspans, so this may sound like a real hack, but here is a script that will do what you want ...

 // get our svg doc var svg = document.querySelector('svg'); // get our tspans element var tspans = svg.querySelectorAll('tspan'); // transform it to an array so the clones don't add to the list var ts = Array.prototype.slice.call(tspans); for(var i = 0; i<ts.length; i++){ // get the content var cont = ts[i].textContent.split('\n'); // that wasn't the good one... if(cont.length<2) continue; // create a clone var clone = ts[i].cloneNode(1); // set the text to the new line clone.textContent = cont[1]; // space it a litlle bit more clone.setAttribute('dy', '0.9em') // set the good text to the upperline ts[i].textContent = cont[0]; // append our clone ts[i].parentNode.insertBefore(clone, ts[i].nextSibling) }; 

 var chart = c3.generate({ data: { json: [{ date: '2014-01-01', upload: 200, download: 200, total: 400 }, { date: '2014-01-02', upload: 100, download: 300, total: 400 }, { date: '2014-02-01', upload: 300, download: 200, total: 500 }, { date: '2014-02-02', upload: 400, download: 100, total: 500 }], keys: { x: 'date', value: ['upload', 'download'] } }, axis: { x: { type: 'timeseries', tick: { format: function (x) { if (x.getDate() === 1) { return x.getMonth() + '\n' + x.getFullYear(); } } } } } }); // get our svg doc var svg = document.querySelector('svg'); // get our tspans element var tspans = svg.querySelectorAll('tspan'); // transform it to an array so the clones don't add to the list var ts = Array.prototype.slice.call(tspans); for(var i = 0; i<ts.length; i++){ // get the content var cont = ts[i].textContent.split('\n'); // that wasn't the good one... if(cont.length<2) continue; // create a clone var clone = ts[i].cloneNode(1); // set the text to the new line clone.textContent = cont[1]; // space it a litlle bit more clone.setAttribute('dy', '0.9em') // set the good text to the upperline ts[i].textContent = cont[0]; // append our clone ts[i].parentNode.insertBefore(clone, ts[i].nextSibling) }; 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script> <link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"> <div id="chart"></div> 

Answer 2

You need to create a new <tspan> for each new line. The reason is that <tspan> usually located inside a <text> element. Which has certain coordinates. You cannot go against these coordinates.

The only thing you can do is create another <tspan> with a different set of coordinates and place it as you like.

Since SVG Text Elements are rendered using the same rendering methods as the rest of the SVG Graphical Elements, the same coordinate system, transformations, ... etc.

An SVG text element displays the first character at the initial current text position.

This position is determined by the attributes "x" and "y" of the text of the SVG Element.

Inside the <text> element, the text and font properties and the current text, the position can be adjusted with absolute or relative coordinate values ​​by including the <tspan> element.

Answer 3

Perhaps you need:

 var calculate= '<pre>' + x + '\n' + y + '</pre>'; 

You should put all this in pre-tags, which \ n is interpreted as line break.

About: http://www.sitepoint.com/everything-need-know-html-pre-element/

CodePen demo: http://codepen.io/mizech/pen/gPOrEz

Answer 4

I tried the following code in abc.html and it works. Give it a try.

  <!DOCTYPE html> <html> <body> <div id="demo"></div> <script> var x = "jun"; var y = "2015"; document.getElementById("demo").innerHTML =x+"<br>"+y; </script> </body> </html>