D3将文本附加到SVG矩形

我正在寻找附加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> 

我有一个鼠标function，它运行以下内容：

  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将工作正确？ 另外，我应该如何追加矩形？

Answer 1

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

多行标签也有点棘手，你可能想看看这个包装function 。

Answer 2

你有没有尝试SVG 文本元素？

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

rect元素不允许其中的文本元素。 它仅允许描述性元素（ <desc>, <metadata>, <title> ）和animation元素（ <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <mpath>, <set> ）

附加文本元素作为兄弟和定位工作。

UPDATE

使用g分组，这样的事情呢？ 小提琴

你当然可以把逻辑移到你可以附加到的CSS类，从组中移除（this.parentNode）