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，您需要设置相对于{{1}的文本坐标而不是<g>。即：

rect

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

Updated js.fiddle

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

1 个答案: