如何在 d3.js 工具提示中换行？

Question

我创建了以下功能以在地图上显示工具提示。我想在悬停鼠标的工具提示中换行（换行）。我使用 d3.js 创建了一张地图，一切正常我想在工具提示中添加更多文本，但它显示在一行中，所以想打破它为工具提示添加多行。

谢谢，

function circleToolTipShow(event) {
    circleToolTipShow.style.display = 'block';
    toolTip.style.left = event.pageX + 10 + 'px';
    toolTip.style.top = event.pageY + 10 + 'px';
    toolTip.textContent = 'Group:' + event.target.getAttribute('M11_Competition1') +
                           ', Representative:' + event.target.getAttribute('M11_Rep') +
                           ', Gender:' + event.target.getAttribute('M11_Rep_Gender') +
                           ', Education:' + event.target.getAttribute('M11_Rep_Education') +
                           ', Term:' + event.target.getAttribute('M11_Rep_Term') +
                           ', Vote:' + event.target.getAttribute('M11_Rep_Vote') +
                           ', Age Year:' + event.target.getAttribute('M11_Rep_AgeYear') +
                           ', Birth In Province:' + event.target.getAttribute('M11_Rep_BirthInProvince') +
                           ', Bitth Province:' + event.target.getAttribute('M11_Rep_BirthProvince') +
                           ' ,Occupation In Province:' + event.target.getAttribute('M11_Rep_OccupationInProvince') +
                           ', Competition3:' + event.target.getAttribute('M11_Competition3') +
                           ', Competition4:' + event.target.getAttribute('M11_Competition4') +
                           ', Incunbency:' + event.target.getAttribute('M11_Rep_Incumbency')
                           ;    
}
function circleToolTipHide() {
    toolTip.style.display = 'none';
}

 var circ = d3.select('svg').append('circle')
            .attr('cx', cityBox.x + cityBox.width / spaceBetweenDots)
            .attr('cy', (cityBox.y + cityBox.height / spaceBetweenDots))
            .attr('fill', dotColor)
            .attr('r', 5)
            .attr('stroke', dotColor)
            .attr('stroke-width', 5)
            .attr('class', 'circleMark')
            .attr('M11_Competition1', party)
            .attr('M11_Rep', representative)  //Take value of rep from sheet
            .attr('M11_Rep_Gender', gender)  //Take value of rep from sheet
            .attr('M11_Rep_Education', education)//Take value of rep from sheet
            .attr('M11_Rep_Term', terms)  //Take value of rep from sheet
            .attr('M11_Rep_Vote', vote)  //Take value of rep from sheet
            .attr('M11_Rep_AgeYear', ageYear)
            .attr('M11_Rep_BirthInProvince', birthInProvince)
            .attr('M11_Rep_BirthProvince', birthProvince)
            .attr('M11_Rep_OccupationInProvince', occupationInProvince)
            .attr('M11_Competition3', competition3)
            .attr('M11_Competition4', competition4)
            .attr('M11_Rep_Incumbency', repIncumbency)    
    
    ;  
    circ["_groups"][0][0].addEventListener('mousemove', circleToolTipShow, true);
    circ["_groups"][0][0].addEventListener('mouseout', circleToolTipHide);

Answer 1

由于 toolTip.textContent 中的字符串变得又长又笨重，您可以使用 Template literals (Template strings)，使用 ` 反引号允许 多行字符串 和 简单的字符串构建.

之后，我们可以做一些简单的格式化。在这种情况下， 将内容附加为 HTML，使用 innerHTML 而不是 textContent，我在每个 [ 之后添加了 <br> 换行符=27=]，但你可以按照你喜欢的方式来表达。

toolTip.innerHTML = `
Group: ${event.target.getAttribute('M11_Competition1')} <br>
Representative: ${event.target.getAttribute('M11_Rep')} <br>
Gender: ${event.target.getAttribute('M11_Rep_Gender')} <br>
Education: ${event.target.getAttribute('M11_Rep_Education')} <br>
Term: ${event.target.getAttribute('M11_Rep_Term')} <br>
Vote: ${event.target.getAttribute('M11_Rep_Vote')} <br>
Age Year: ${event.target.getAttribute('M11_Rep_AgeYear')} <br>
Birth In Province: ${event.target.getAttribute('M11_Rep_BirthInProvince')} <br>
Bitth Province: ${event.target.getAttribute('M11_Rep_BirthProvince')} <br>
Occupation In Province: ${event.target.getAttribute('M11_Rep_OccupationInProvince')} <br>
Competition3: ${event.target.getAttribute('M11_Competition3')} <br>
Competition4: ${event.target.getAttribute('M11_Competition4')} <br>
Incunbency: ${event.target.getAttribute('M11_Rep_Incumbency')}
`

如何在 d3.js 工具提示中换行？

How to break line in d3.js toolTip?

javascript

svg

tooltip

d3.js