<br/> 无法在工具提示中添加第二行

Question

目前我正在使用 D3.js 制作可折叠的树。我成功地添加了一个工具提示，所以一旦我将鼠标悬停在图像上，就会添加该图像的信息。问题是不幸的是不能使用 <br/> 在两个数据点之间添加第二行。使用引号只会打印出命令，不使用引号会破坏整个图形。

这是目前的样子：

就像命令就位...

如何添加第二行文字？

function mouseover(d) {
d3.select(this).append("text")
    .attr("class", "hover")
    .attr('transform', function(d){
        return 'translate(28, 0)';
    })
    .text(d.data.name + "<br/>" + d.data.hero);
 }

function mouseout(d) {
   d3.select(this).select("text.hover").remove();
 }

Answer 1

我认为您需要单独附加以下行：http://plnkr.co/edit/nSANKfzNFtzyIthgVBWZ?p=preview

// Creates hover over effect
  function mouseover(d) {
    d3.select(this).append("text")
        .attr("class", "hover")
        .attr('transform', function(d){
            return 'translate(28, 0)';
        })
        .text(d.data.name);

  d3.select(this).append("text")
        .attr("class", "hover2")
        .attr('transform', function(d){
            return 'translate(28, 10)';
        })
        .text(d.data.hero);
  }

  function mouseout(d) {
    d3.select(this).select("text.hover").remove();
    d3.select(this).select("text.hover2").remove();
  }

<br/> 无法在工具提示中添加第二行

<br/> doesn't work to add second line in Tooltip

javascript

tooltip

d3.js