D3 将文本附加到 SVG 矩形

IT技术 javascript svg d3.js
2021-02-11 14:51:00

我希望将 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 不会正常工作？另外，我应该如何附加矩形？

2个回答

Arect不能包含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

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

g.node 是你想要的，将文本附加到它。
2021-03-20 14:51:00
可以工作。或者将鼠标侦听器附加到 g 元素，您将能够轻松地从那里附加。
2021-03-29 14:51:00
啊，我猜因为我把我的鼠标监听器放在节点上是为什么它给我 g.node 给我打电话？
2021-04-03 14:51:00
我希望我的文本框出现在鼠标悬停时，所以我创建了一个函数来做到这一点。但这最终成为一个 g.node 并且不会让我附加到它。那么我应该在创建数据时这样做然后只显示和隐藏它还是？
2021-04-09 14:51:00

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

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

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

将文本元素附加为同级元素并进行定位。

更新

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

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

虽然这可以将元素附加为兄弟元素（兄弟部分是我做错的地方），但必须有一个更优雅的解决方案，感谢将其破解到最后？
2021-03-22 14:51:00
经过几个小时的努力，试图将 rect 的触摸事件映射到特定的文本对象（在 v3 中很简单，在 v4 中不太容易），您的小提琴向我介绍了nextSibling，最终解决了问题。谢谢！
2021-03-30 14:51:00
其它你可能感兴趣的问题
上一篇TypeError: $(...).DataTable 不是函数 下一篇如何使用我添加的外部脚本来响应 JS？