在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/