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/

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

1 个答案: