标签: d3plus

使用 D3 v4 和 D3plus 将文本绕成圆圈

我正在使用 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) }); …

Run Code Online (Sandbox Code Playgroud)

d3.js d3plus

Mia*_*Mia

lucky-day

5
推荐指数

1
解决办法

2035
查看次数

如何使用 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

Ami*_*mit

lucky-day

5
推荐指数

0
解决办法

641
查看次数

如何在D3中添加(自定义)千位分隔符？

我正在使用D3Plus,D3Plus接受任何D3方法.

我可以设法删除小数.我不能做的是添加'.' 作为一个千分词而不是','(西班牙语1.000.000是'一百万')这是一个讲西班牙语的观众.

这是我的代码的相关部分

"number": function(number, params) {
    var formatted = d3plus.number.format(number, params);
      if (params.key === "encuentros") {
        return d3.round(number,0);
      }
      if (params.key === "poblacion") {
        return d3.round(number,0);
      }
      else {
        return formatted;
      }
  }

Run Code Online (Sandbox Code Playgroud)

我尝试过,return d3.round(number,0) + d3.format('.')但这不起作用.

图表是"ok"但没有小数点分隔符.