javascript-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>

我有一个鼠标悬停功能,其运行以下命令:

    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 asked 2019-10-09T05:20:38Z
2个解决方案
112 votes

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]

多行标签也有些棘手,您可能需要查看此包装功能。

Adam Pearce answered 2019-10-09T05:21:04Z
7 votes

您是否尝试过SVG文本元素?

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

rect元素不允许在其中包含text元素。 它仅允许描述性元素(<desc>, <metadata>, <title>)和动画元素(<animate>, <animatecolor>, <animatemotion>, <animatetransform>, <mpath>, <set>

将文本元素附加为同级,然后进行定位。

UPDATE

使用g分组,这样的事情怎么样? 小提琴

您当然可以将逻辑移到可以附加的CSS类上,然后从组中删除(this.parentNode)

cbayram answered 2019-10-09T05:21:59Z
translate from https://stackoverflow.com:/questions/20644415/d3-appending-text-to-a-svg-rectangle