将 HTML 附加到 d3 中的现有工具提示

Question

我正在尝试修改zalando's tech radar 中的工具提示。

相关代码为：

  function showBubble(d) {
    if (d.active || config.print_layout) {
      var tooltip = d3.select("#bubble text")
        .text(d.label);
      var bbox = tooltip.node().getBBox();
      d3.select("#bubble")
        .attr("transform", translate(d.x - bbox.width / 2, d.y - 16))
        .style("opacity", 0.8);
      d3.select("#bubble rect")
        .attr("x", -5)
        .attr("y", -bbox.height)
        .attr("width", bbox.width + 10)
        .attr("height", bbox.height + 4);
      d3.select("#bubble path")
        .attr("transform", translate(bbox.width / 2 - 5, 3));
    }
  }

为了扩展工具提示，我尝试根据解决方案 described here 执行以下操作。

我修改后的代码：

function showBubble(d) {
    if (d.active || config.print_layout) {
      var tooltip = d3.select("#bubble text");
      tooltip.html("foo"); // this works!
      //tooltip.html(function(d) { d.label}) // d is undefinded here ...
      tooltip.append("div").attr("id", "foo");

      d3.select("#foo").html("This is not shown").attr("style", "block");

      var bbox = tooltip.node().getBBox();

      d3.select("#bubble")
        .attr("transform", translate(d.x - bbox.width / 2, d.y - 16))
        .style("opacity", 0.8);
      d3.select("#bubble rect")
        .attr("x", -5)
        .attr("y", -bbox.height)
        .attr("width", bbox.width + 10)
        .attr("height", bbox.height + 4);
      d3.select("#bubble path")
        .attr("transform", translate(bbox.width / 2 - 5, 3));
    }
  }

谁能给我提示如何显示这些额外的文字？

更新

完整代码https://github.com/zalando/tech-radar

Answer 1

svg 中的多行文本的工作方式与 HTML 略有不同。您不能只附加 <div> 和 <br> 标签，因为它们在 SVG 中没有任何意义。

所以你的选择是：

• 使用 foreignObject 在 SVG 中呈现 HTML

var tooltip = d3.select("#bubble")
var fo = tooltip.append('foreignObject').attr('width', '100%').attr('height', '100%')
var foDiv = fo.append("xhtml:body").append("xhtml:div").attr('class', 'fe-div').style('background', '#ccc').html("foo <br>2nd line <br>3rd line")

html,
body,
svg {
  height: 100%
}

.fe-div {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <g id="bubble">
  </g>
</svg>

• 或使用定位的tspan 元素来分解文本，如下所示：

var tooltip = d3.select("#bubble text");
tooltip.html("foo"); // this works!

// Create a tspan for the 2nd line
var tspan1 = tooltip.append("tspan");
tspan1.html("2nd line");
tspan1.attr('x', 0).attr('dy', '1em')

// Create a tspan for the 3rd line
var tspan2 = tooltip.append("tspan");
tspan2.html("3rd line");
tspan2.attr('x', 0).attr('dy', '1em')

html,
body,
svg {
  height: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <g id="bubble">
    <text y="35"></text>
  </g>
</svg>