<br/>无法在Tooltip中添加第二行

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();
  }