我正在尝试使用 d3plus-text 的 textBox 模块进行 SVG 文本框换行和自动字体大小缩放。我按照这里的使用说明进行操作https://github.com/d3plus/d3plus-text#d3plus-text
更新根树后,我正在使用像这样的函数(如 github 中推荐的那样):
new d3plus.TextBox()
.data(d3.select("text#rectResize"))
.fontSize(16)
.width(200)
.x(function(d, i) { return i * 250; })
.render();
Run Code Online (Sandbox Code Playgroud)
但我遇到了以下错误消息的问题:
d3plus-text.v0.10.full.min.js:7 Uncaught (in promise) TypeError: this._data.reduce is not a function
at i.a (d3plus-text.v0.10.full.min.js:7)
at test6.html:86
Run Code Online (Sandbox Code Playgroud)
我四处搜寻,但仍然无法完成这项工作。对此的任何帮助将不胜感激。
PS:我知道我可以使用 MikeBostics Wrap 功能,您可以看到我在下面的代码中使用了该功能并进行了一些编辑,并且它可以工作。但我仍然想学习如何使用 d3plus.TextBox,因为它看起来更优雅并且提供了附加功能。
我的脚本的较短版本如下。你可以在这里摆弄它
<!DOCTYPE html>
<meta charset="UTF-8">
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3plus.org/js/d3plus-text.v0.10.full.min.js"></script>
<style>
.node circle {
fill: #FFF;
stroke: #009BE4;
stroke-width: 2px;
}
.node text {
font: 12px …Run Code Online (Sandbox Code Playgroud)