在 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> 上的文本即可。

EDIT：为了将文本格式化为 on the rect，您需要制作坐标相对于 <g> 的文本，而不是 rect。即：

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

现在文本就在那里，和在矩形的顶部。

Updated js.fiddle

在 d3 中，如何在折线图上滚动时包含文本和背景框？

In d3, how do I include text and a background box as I roll over my line chart?

javascript

svg

background

rect

d3.js