I am trying to structure my output in D3.js visualization and I am using \n line returns but it's not read by JS, any ideas on how it can be solved?
Thank you very much in advance :)
.on('mousemove', function(d) {
tooltip
.style('top', d3.event.pageY - 10 + 'px')
.style('left', d3.event.pageX + 10 + 'px')
.text(`Number of clones in the class: ${d.data.value/2} \r\n \n \r
Code of the class: ${d.data.code}
Lines at which the clone appears: ${d.data.lines}`);
})
you can use tspan for each new line and play with dy attributes for line height
.on('mousemove', function(d) {
tooltip
.style('top', d3.event.pageY - 10 + 'px')
.style('left', d3.event.pageX + 10 + 'px')
.html(`<tspan x='0' dy='1.2em'>Number of clones in the class: ${d.data.value/2}</tspan>
<tspan x='0' dy='1.2em'>Code of the class: ${d.data.code}</tspan>
<tspan x='0' dy='1.2em'>Lines at which the clone appears: ${d.data.lines}</tspan>`);
})