在SVG矩形中添加文本的D3应用程序

Question

在SVG矩形中添加文本的D3应用程序

81

我想在D3中将HTML添加到一个矩形上，以便为我提供多行工具提示。下面是我如何添加矩形的方式，这可能是问题的一部分。顶部是应该在我的世界中起作用的代码。

 newRect.().html(" <textArea font-family=Verdana font-size=20 fill=blue > Test " + "</br>" + "Test2 </textArea>");

这可以在SVG中插入一个文本字段，但它不会被显示出来：
HTML:

<rect id="rectLabel" x="490" y="674" width="130" height="160" fill="red">
    <textarea fill="blue" font-size="20" font-family="Verdana"> Test </br>Test2 </textarea>
</rect>

我有一个鼠标悬停函数，运行以下内容：

    newRect = svg.append("rect")
    .attr("x", xCor)
    .attr("y", yCor)
    .attr("width", 130)
    .attr("height", 160)
    .attr("fill", "red")
    .attr("id", "rectLabel");

我认为我应该这样做，但它不起作用。它只是删除了我试图添加到的g.node。

    newRect = $(this).enter().append("rect")
    .attr("x", xCor)
    .attr("y", yCor)
    .attr("width", 130)
    .attr("height", 160)
    .attr("fill", "red")
    .attr("id", "rectLabel");

问题：为什么我的文本不显示？我尝试了 .html，.textArea。我想要一个多行标签，所以我认为 .text 不太合适？此外，我该如何附加矩形？

- gbam

2个回答

9

你尝试过SVG 文本元素吗？

.append("text").text(function(d, i) { return d[whichevernode];})

rect 元素不允许在其内部包含 text 元素。它只允许描述性元素（<desc>, <metadata>, <title>）和动画元素（<animate>, <animatecolor>, <animatemotion>, <animatetransform>, <mpath>, <set>）。

将 text 元素作为同级元素添加，并进行定位。

更新

使用 g 分组，可以尝试像这样做：fiddle

您可以将逻辑移动到 CSS 类中，然后将其附加到分组（this.parentNode）或从分组中删除。

- cbayram

虽然这个方法可以将元素附加为同级元素（同级元素是我做错的部分），但肯定有更优雅的解决方案，而不是将其添加到末尾。 - gbam

经过几个小时的努力，我终于通过 nextSibling 函数解决了在 v4 版本中难以将触摸事件映射到特定文本对象的问题（在 v3 中很容易）。非常感谢你的示例代码对我的帮助！ - Martin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam Pearce · Accepted Answer

一个 rect 不能包含一个 text 元素。取而代之的是，使用一个带有文本和矩形位置的 g 元素进行变换，然后将矩形和文本都添加到其中：

var bar = chart.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 1);

bar.append("text")
    .attr("x", function(d) { return x(d) - 3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d; });

http://bl.ocks.org/mbostock/7341714

多行标签也有一点棘手，你可能需要查看这个换行函数。