在d3折线图中，如何在文本后面创建与鼠标悬停相同大小的边框？

Question

我正在使用d3 v4。 我想为我的折线图创建一个过渡，以便每个点显示的信息完全由与文本大小相同的背景框捕获。 不过，我对如何执行此操作感到困惑。 我正在像这样创建SVG元素

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

...

  var rect = focus.append("rect")
    .attr("x", 9)
    .attr("dy", ".35em")
    .attr("width", 50)
    .attr("height", 50)
    .attr("fill", "yellow");

  var text = focus.append("text")
      .attr("x", 10)
      .attr("y", 10);

  svg.append("rect")
      .attr("class", "overlay")
      .attr("width", width)
      .attr("height", height)
      .on("mouseover", function() { focus.style("display", null); })
      .on("mouseout", function() { focus.style("display", "none"); })
      .on("mousemove", mousemove);

  function mousemove() {
    var x0 = x.invert(d3.mouse(this)[0]),
        i = bisectDate(data, x0, 1),
        d0 = data[i - 1],
        d1 = data[i],
        d = x0 - d0.date > d1.date - x0 ? d1 : d0;
    focus.attr("transform", "translate(" + x(d.index_date) + "," + y(d.value) + ")");
    var descriptor = d.value + "\n" + d.index_date
    focus.select("text").text(descriptor);
  }

不过，我有几个问题。 首先，边框的尺寸是固定的，因此它不会捕获文本。 其次，我的新行在文本中似乎被忽略了。 理想情况下，我需要两行，一个带有值，第二个带有日期。 这说明了什么我到目前为止小提琴- https://jsfiddle.net/8reo2Lvc/1/ 。 如何创建与其周围的文字大小相同的边框？

Answer 1

关于换行问题，您不能使用"\\n"来中断SVG文本元素。 取而代之的是，添加一个<tspan> ：

focus.select("text")
    .text(d.value)
    .append("tspan")
    .attr("x", 10)
    .attr("dy", "1.5em")
    .text(d.index_date);

现在，回到边界框问题。 一种简单的方法是获取文本元素的边界框：

var bbox = focus.select("text").node().getBBox();

并使用它来设置矩形的宽度和高度：

rect.attr("width", bbox.width)
    .attr("height", bbox.height)

这是具有这些更改的更新的小提琴： https : //jsfiddle.net/yw46ycse/