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