在d3中，我如何在我的折线图上滚动文本和背景框？

Question

我正在使用d3 v4。我想显示一些文字，对应于人们将鼠标悬停在我的折线图上，我希望在此文本上有一个背景框。所以我想这个

svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Value"); 

    svg.append("path") 
     .datum(data) 
     .attr("class", "line") 
     .attr("d", line); 

    var focus = svg.append("g") 
     .attr("class", "focus") 
     .style("display", "none"); 

    focus.append("circle") 
     .attr("r", 4.5); 

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

    ... 

    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) + ")"); 
    rect.select("text").text(formatCurrency(d.value)); 
    } 

，但所发生的事情，而不是在那里只是没有任何文字的漂浮在我的鼠标悬停点，你可以在这里看到一个长方形 - https://jsfiddle.net/xx77tzn3/9/。如何调整我必须包含的文本和背景框？

Answer 1

<svg>（相当不直观）不允许您将text元素附加到rect元素。取消注释

//var text = focus.append("text") 

，并注释：

var text = rect.append("text") 

然后鼠标功能，变线113这样的：

focus.select("text").text(formatCurrency(d.value)); 

然后，它只是一个对<g>格式化文本的事。

编辑：为了格式的文本是上的rect，你需要做文本相对的坐标为<g>，而不是rect。即：

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

现在的文本是存在的，在矩形的顶部和。

Updated js.fiddle