微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何在d3.js工具提示中换行?

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。