D3向SVG矩形追加文本

Question

我想把html附加到D3中的矩形上，给我一个多行工具提示。底部是如何添加一个矩形，这可能是问题的一部分。最上面是应该在我的世界里工作的代码。

 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。我想要一个多行标签，所以我不认为。文本将工作正确？另外，我应该如何添加矩形呢？

Answer 1

您尝试过SVG文本元素吗？

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

rect元素不允许在其中包含文本元素。它只允许描述性元素( 、 、 、 、 、 、 、 set> )

将text元素追加为同级元素并进行定位。

更新

使用g分组，像这样的东西怎么样？小提琴

当然，您可以将逻辑移动到一个CSS类中，您可以追加到这个类中，也可以从组中删除这个类（this.parentnode）

Answer 2

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

多行标签也有点棘手，你可能想看看这个换行功能。