JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<svg>
    <!-- Text that will use the D3plus default wrapping. -->
    <text class="type" dy="15px" x="75px">Wrapped</text>
    <rect class="shape" height="150px" width="150px" y="50px"></rect>
    <text id="rectWrap" class="wrap" y="50px" font-size="12">Here is a long text string that SVG should wrap by default, but it does not.</text>
    <circle class="shape" r="75px" cx="75px" cy="300px"></circle>
    <text id="circleWrap" class="wrap" y="225px" x="0px" font-size="12">Here is a long text string that SVG should wrap by default, but it does not.</text>
    <!-- Text that D3plus will resize to fit the available space. -->
    <text class="type" dy="15px" x="275px">Resized</text>
    <rect class="shape" height="150px" width="150px" y="50px" x="200px"></rect>
    <text id="rectResize" class="wrap" y="50px" x="200px" font-size="12">Here is a long text string that SVG should wrap by default, but it does not.</text>
    <circle class="shape" r="75px" cx="275px" cy="300px"></circle>
    <text id="circleResize" class="wrap" y="225px" x="200px" font-size="12">Here is a long text string that SVG should wrap by default, but it does not.</text>
    <!-- For comparison, how SVG would display the text without D3plus. -->
    <text class="type" dy="15px" x="475px">Default Behavior</text>
    <rect class="shape" height="150px" width="150px" y="50px" x="400px"></rect>
    <text class="wrap" y="50px" x="400px" font-size="12">Here is a long text string that SVG should wrap by default, but it does not.</text>
    <circle class="shape" r="75px" cx="475px" cy="300px"></circle>
    <text class="wrap" y="225px" x="400px" font-size="12">Here is a long text string that SVG should wrap by default, but it does not.</text>
</svg>

CSS

svg {
      font-family:"Helvetica", "Arial", sans-serif;
      height: 425px;
      margin: 25px;
      width: 900px;
  }
  .type {
      fill: #888;
      text-anchor: middle;
  }
  .shape {
      fill: #eee;
      stroke: #ccc;
  }

JavaScript

var d3plus = {};

d3plus.textwrap = function () {
    var _alignment = "center";
    var _container;
    var _format = "en_GB";
    var _resize = false;
    var _rotate = "0";
    var _shape = "square";
    var _size;
    var _text = "";
    var _valign = "middle";
    var _height;
    var _width;
    var _padding;
    var _x;
    var _y;

    /// Defines the horizontal alignment of the block of text to be wrapped. 
    /// If undefined, D3plus will use the text element's "text-anchor" property if it has been set.
    /// Accepted values are: "left" or "start", "center" or "middle", "right" or "end".
    this.align = function (_) {
        if (!arguments.length) return _alignment;
        if (_ === "center") {
            _ = "middle";
        }
        if (_ === "right") {
            _ = "end";
        }
        if (_ === "left") {
            _ = "start";
        }
        _alignment = _;
        return this;
    };

    /// When wrapping multiple blocks of text, they often share the same basic set of method values. 
    /// Using this method, multiple methods can be set using a pre-defined javascript Object that matches 
    /// the structure of the various other methods. In this example, the .width( ), .height( ), and .resize( ) 
    /// methods are all being set by using only the .config( ) method:
    this.config = function (_) {
        // Return the object if need be
        if (!arguments.length) return {
            alignment: _alignment,
            container: _container,
            format: _format,
            resize: _resize,
            rotate: _rotate,
            shape: _shape,
            size: _size,
            text: _text,
            valign: _valign,
            height: _height,
            width: _width,
            padding: _padding,
            x: _x,
            y: _y
        };

        // Add each property dynamically
        for (var property in _) {
            if (_.hasOwnProperty(property)) {
               ...