JSFiddle - React, Tailwind, and code Playground

CSS

text {
    font-family: sans-serif;
}

JavaScript

var data = {
    "name": "",
    "children": [
        { "name": "This is a tag and wants to be", "value": 242 },
        { "name": "This is a tagee", "value": 242 },
        { "name": "Circle", "value": 162 },
        { "name": "Tree House", "value": 80 },
        { "name": "My sentence is very long and needs breaks", "value": 42 },
        { "name": "All monkeys sit on trees", "value": 42 },
        { "name": "Test", "value": 5 },
        { "name": "Beer", "value": 120 }
    ]
}

var diameter = 400,
    format = d3.format(",d");
        
var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

d3.json(data, function(error, root) {
  var node = svg.selectAll(".node")
      .data(bubble.nodes(data)
      .filter(function(d) { return !d.children; }))
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  node.append("circle")
      .attr("r", function(d) { return d.r; })
      .style("fill", function(d) { return '#f88' });

  // text part
  node.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .style("font-size", function(d) {
          var len = d.name.substring(0, d.r / 3).length;
          var size = d.r/3;
          size *= 10 / len;
          size += 1;
          return Math.round(size)+'px';
      })
      .text(function(d) {
          var text = d.name.substring(0, d.r / 3);
          /*var pos = text.indexOf(' ', text.length / 2);
          if(pos < text.length / 2 + 5) {
              text = text.substring(0, pos) + "\n" + text.substring(pos+1);
          }*/
                    
          return text;
      });
});

d3.select(self.frameElement).style("height", diameter + "px");