JSFiddle - React, Tailwind, and code Playground

by passionateCoder

HTML

<div id="body"></div>

JavaScript

function wrap(text, width) {
        text.each(function () {
          var text = d3.select(this),
            words = text.text().split(/\s+/).reverse(),
            word,
            line = [],
            lineNumber = 0,
            lineHeight = 1.1, // ems
            y = text.attr('y'),
            dy = parseFloat(text.attr('dy')),
            tspan = text
              .text(null)
              .append('tspan')
              .attr('x', 10)
              .attr('y', y)
              .attr('dy', dy + 'em');
          while ((word = words.pop())) {
            line.push(word);
            tspan.text(line.join(' '));
            if (tspan.node().getComputedTextLength() > width) {
              line.pop();
              tspan.text(line.join(' '));
              line = [word];
              tspan = text
                .append('tspan')
                .attr('x', 10)
                .attr('y', y)
                .attr('dy', ++lineNumber * lineHeight + dy + 'em')
                .text(word);
            }
          }
        });
      }
      
      var svg = d3
        .select('body')
        .append('svg')
        .attr('width', 500)
        .attr('height', 5000);

      var longText =
        'Now is the time for all good men to come to the aid of their countryNow is the time for all good men to come to the aid of their countryNow is the time for all good men to come to the aid of their countryNow is the time for all good men to come to the aid of their country';

      var totHeight = 0;

      drawRect();

      function drawRect() {
        //var someWidth = randomIntFromInterval(40, 300);
        var someWidth = 212;

        var g = svg
          .append('g')
          .attr('transform', 'translate(20,' + totHeight + ')');

        var rect = g
          .append('rect')
          .style('fill', 'steelblue')
          .attr('width', someWidth)
          .attr('height', 1);

        var txt = g
          .append('text')
          .text(longText)
         ...