小编Ami*_*mit的帖子

如何使用 d3plus.TextBox() 模块进行 SVG 换行和自动字体大小缩放(在 D3.js 层次结构树上)

我正在尝试使用 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)

javascript d3.js d3plus

5
推荐指数
0
解决办法
641
查看次数

标签 统计

d3.js ×1

d3plus ×1

javascript ×1