Wrap text in a circle with D3 v4 and D3plus

Question

I'm using D3 v4 and I want to wrap text in a circle with D3plus. I was trying two approaches but nothing worked for me.

First approach

I adopted the example from https://bl.ocks.org/davelandry/a39f0c3fc52804ee859a . This is the essential part of my code:

<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>

With this code I get 2 errors:

TypeError: d3.scale is undefined

ReferenceError: d3plus is not defined

So it looks like d3plus is not working with D3 v4...

Then I found this post https://groups.google.com/forum/#!topic/d3plus/WN2Ruj3kjPA and tried to take the example from the linked Github project d3plus-text (sorry, I've got not enough reputation to post the link).

So I changed my code:

old

   <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>

new

   <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>

And in the script I just replaced

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

with

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

But actually nothing happens. The text looks the same as before.

And I get this error:

TypeError: t is undefined at d3.v4.min.js:4:27260

I have no idea how to adopt the example correctly. And I didn't find any other example on how to use d3plus.TextBox()

What I'm doing wrong?

score 3 · Answer 1 · answered Dec 22 '17 at 19:30

3

use d3plus

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

answered Dec 22 '17 at 19:30

Kristina Darroch

171
10

score 0 · Answer 2 · answered Mar 06 '19 at 14:44

0

I got it to work by using d3plus-text.Textbox()

answered Mar 06 '19 at 14:44

Chitra Sharathchandra

73
7

1

Can you point to a working example, I am trying to achieve what's discussed @ https://bl.ocks.org/davelandry/a39f0c3fc52804ee859a but using new d3plus.TextBox() – pateketu Aug 08 '19 at 12:27
In package.json - "d3plus": "^2.0.0-alpha.18"; Perform the following import in component file: import * as D3PlusText from 'd3plus-text'; Use as follows in component file: new D3PlusText.TextBox()... – Chitra Sharathchandra Aug 12 '19 at 13:50

Wrap text in a circle with D3 v4 and D3plus

2 Answers2