鼠標懸停事件中 D3.js 中的行返回

Question

我正在嘗試在 D3.js 可視化中構建我的 output 並且我正在使用 \n 行返回，但 JS 沒有讀取它，關於如何解決它的任何想法？

非常感謝您提前:)

.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}`);
    })

Answer 1

您可以對每個新行使用tspan並使用dy屬性來獲取行高

.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>`);
    })