使用 D3 v4 和 D3plus 将文本环绕在一个圆圈中答案

【问题标题】：Wrap text in a circle with D3 v4 and D3plus使用 D3 v4 和 D3plus 将文本环绕在一个圆圈中
【发布时间】：2019-03-06 22:44:38
【问题描述】：

我正在使用 D3 v4，我想用 D3plus 将文本环绕在一个圆圈中。我尝试了两种方法，但对我没有任何效果。

第一种方法

我采用了https://bl.ocks.org/davelandry/a39f0c3fc52804ee859a 中的示例。这是我的代码的重要部分：

<head>
  <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
  <script type="text/javascript" src="https://d3plus.org/js/d3plus.js"></script>
</head>

<body>

  <div id="graphContainer" class="graphContainer">
    <svg width="960" height="600"></svg>
  </div>

  <script>
    d3.json('licenseSmall.json', function(error, graph) {
       if (error) throw error;

       var nodeContainer = svg.append("g")
         .attr("class", "nodeContainer");

       var node = nodeContainer.selectAll(".node")
         .data(graph.nodes)
         .enter().append("g")
         .attr("class", "nodes")
         .call(d3.drag()
           .on("start", dragstarted)
           .on("drag", dragged)
           .on("end", dragended));

       var circle = node.append("circle")
         .attr("r", 20)
         .attr("fill", function(d) { return color(d.color); });

       node.append("text")
         .attr("id", "text")
         .attr("dx", -10)
         .attr("dy", ".35em")
         .attr("test-anchor", "middle")
         .text(function(d) { return getText(d) });

       // Wrap text in a circle.
       d3plus.textwrap()
         .container(d3.select("#text"))
         .draw();

    });
  </script>

</body>

使用此代码我得到 2 个错误：

TypeError: d3.scale 未定义

ReferenceError: d3plus 未定义

所以看起来 d3plus 不适用于 D3 v4...

然后我发现了这个帖子https://groups.google.com/forum/#!topic/d3plus/WN2Ruj3kjPA 并尝试从链接的 Github 项目 d3plus-text 中获取示例（对不起，我没有足够的声誉来发布链接）。

所以我改变了我的代码：

旧

   <head>
     <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
     <script type="text/javascript" src="https://d3plus.org/js/d3plus.js"></script>
   </head>

新

   <head>
     <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
     <script src="https://d3plus.org/js/d3plus-text.v0.9.full.min.js"></script>
   </head>

在我刚刚替换的脚本中

    // Wrap text in a circle.
    d3plus.textwrap()
      .container(d3.select("#text"))
      .draw();

与

   new d3plus.TextBox()
      .data(d3.select("#text").data())
      .fontSize(16)
      .width(200)
      .x(function(d, i) { return i * 250; })
      .render();

但实际上什么也没发生。文字看起来和以前一样。

我得到这个错误：

TypeError: t 在 d3.v4.min.js:4:27260 处未定义

我不知道如何正确采用这个例子。而且我没有找到任何其他关于如何使用 d3plus.TextBox() 的示例

我做错了什么？

【问题讨论】：

标签： d3.js d3plus

【解决方案1】：

使用 d3plus

d3plus.textwrap()
    .container(d3.select("#your-div"))
    .shape('circle')
    .width(290)
    .height(75)
    .resize(true)
    .draw();

【讨论】：

【解决方案2】：

我使用d3plus-text.Textbox()让它工作

【讨论】：

你能指出一个工作示例吗，我正在尝试实现@bl.ocks.org/davelandry/a39f0c3fc52804ee859a 所讨论的内容，但使用新的 d3plus.TextBox()
在 package.json - "d3plus": "^2.0.0-alpha.18";在组件文件中执行以下导入： import * as D3PlusText from 'd3plus-text';在组件文件中使用如下：new D3PlusText.TextBox()...