javascript - 无法在工具提示中添加第二行

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