Line break in C3 generated SVG chart via JavaScript
I need a help on generating line break in html.
Javascript
var x = "jun";
var y = "2015";
var calculate= x + "<br>" + y;
Html returns like below
<div>jan <br> 2015</div>
expected result: i need a line break in html but should not render <br> tag.
Update: what i want is "jan" in first line and next line "2015"
I am using these values in c3 chart x values.
JSFIDDLE
Thanks in Advance.
Your question statement was a bit unprecise : You are using C3.js which will produce svg element.
So the markup returned was actually <tspan dx="0" dy=".71em" x="0">0<br>2014</tspan> .
C3 will use the textContent property of the tspan to append the text content returned by your function.
As already said in other questions, you can't add a line break into <tspan> elements.
So the solution is effectively to create a new tspan just under the other one, in the same <text> element.
Unfortunately, there is no way to get these precise elements except by looping through all others tspans, so this may sounds 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> You need to create new <tspan> for each new line. Reason is that <tspan> is usually found inside <text> element. Which has certain coordinates. You cannot go "against" those coordinates.
The only thing you can do is create another <tspan> with different set of coordinates and position it as you like.
Because SVG Text Elements are rendered using the same rendering methods as the rest of the SVG Graphical Elements, the same coordinate system, transformations, ... etc also apply.
The SVG Text Element renders the first character at the initial current text position.
This position is defined by the 'x' and 'y' attributes of the SVG Text Element.
Within a <text> element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by including a <tspan> element.
Perhaps that's what you need:
var calculate= '<pre>' + x + 'n' + y + '</pre>';
You have to put the whole thing in pre-tags that the n is interpreted as a line break.
About: http://www.sitepoint.com/everything-need-know-html-pre-element/
Demo on CodePen: http://codepen.io/mizech/pen/gPOrEz
链接地址: http://www.djcxy.com/p/89080.html上一篇: 修补Node.js包版本