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

编程问答 2022-07-24

问题描述

我创建以下用于在地图上显示工具提示的功能。 我想将鼠标悬停在工具提示中的换行（换行）。 我使用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);

enter image description here

解决方法

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

然后，我们可以进行一些简单的格式化。在这种情况下，要将内容附加为HTML，使用innerHTML而不是textContent ，我在每个属性后添加了<br>换行符，但是您可以将其放在您喜欢的方式。

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')}
`
javascriptsvgtooltip