UNPKG

mermaid

Version:

Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.

github.com/knsv/mermaid

knsv/mermaid

1,582 lines • 82.3 kB
<!DOCTYPE html>
<html>
<head>
  <title>d3.js</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" media="all" href="../doc-style.css" />
  <script src="../doc-filelist.js"></script>
  <script>
    var relativeDir = "../", thisFile = "Users/knut/Documents/source/mermaid/src/d3.js", defaultSidebar = true;
  </script>
  <script src="../doc-script.js"></script>
  <script src="../mermaid.js"></script>
  <link rel="stylesheet" href="../mermaid.css" />
</head>
<body>
  <div id="sidebar_wrapper">
    <div id="sidebar_switch">
      <span class="tree">Files</span>
      <span class="headings">Headings</span>
    </div>
    <div id="tree"></div>
    <div id="headings">
      <div class="heading h1">
        <a href="#d3.js">d3.js</a>
      </div>
    </div>
  </div>
  <div id="sidebar-toggle"></div>
  <div id="container"><div class="background highlight"></div>
<table cellpadding="0" cellspacing="0">
  <tbody>
      <tr>
        <td class="docs">
        <div class="pilwrap" id="d3.js">
          <h1>
              <a href="#d3.js" name="d3.js" class="pilcrow">&#182;</a>d3.js
          </h1>
        </div>
        </td>
        <td class="code highlight"></td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-1" id="section-1">&#182;</a>
</div>

        </td>
        <td class="code highlight"><div class="highlight"><pre><span class="cm">/* global window */</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-2" id="section-2">&#182;</a>
</div>
<p>log.debug(&#39;Setting up d3&#39;);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
<span class="kd">var</span> <span class="nx">d3</span><span class="p">;</span>

<span class="k">if</span> <span class="p">(</span><span class="nx">require</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">try</span> <span class="p">{</span>
    <span class="nx">d3</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">&quot;d3&quot;</span><span class="p">);</span>
  <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-3" id="section-3">&#182;</a>
</div>
<p>log.debug(&#39;Exception ... but ok&#39;);
log.debug(e);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
  <span class="p">}</span>
<span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-4" id="section-4">&#182;</a>
</div>
<p>log.debug(d3);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>

<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">d3</span><span class="p">)</span> <span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-5" id="section-5">&#182;</a>
</div>
<p>if(typeof window !== &#39;undefined&#39;)</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">d3</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">d3</span><span class="p">;</span>
<span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-6" id="section-6">&#182;</a>
</div>
<p>if(typeof window === &#39;undefined&#39;){
   window = {};
   window.d3 = d3;
}
log.debug(&#39;window&#39;);
log.debug(window);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">;</span>
<span class="cm">/* jshint ignore:start */</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-7" id="section-7">&#182;</a>
</div>
<div class="dox">
  <div class="summary">
  </div>
  <div class="body"><p>D3 Text Wrap
By Vijith Assar
<a href="http://www.vijithassar.com">http://www.vijithassar.com</a>
<a href="http://www.github.com/vijithassar">http://www.github.com/vijithassar</a></p>

  </div>
  <div class="details">
    <div class="dox_tag_title">vijithassar

Detailed</div>
    <div class="dox_tag_detail">
      <span>instructions at <a href="http://www.github.com/vijithassar/d3textwrap">http://www.github.com/vijithassar/d3textwrap</a>
</span>
    </div>
  </div>
</div>

        </td>
        <td class="code highlight"><div class="highlight"><pre>

<span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-8" id="section-8">&#182;</a>
</div>
<p>set this variable to a string value to always force a particular
wrap method for development purposes, for example to check tspan
rendering using a foreignobject-enabled browser. set to &#39;tspan&#39; to
use tspans and &#39;foreignobject&#39; to use foreignobject</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="kd">var</span> <span class="nx">force_wrap_method</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="c1">// by default no wrap method is forced</span>
    <span class="nx">force_wrap_method</span> <span class="o">=</span> <span class="s1">&#39;tspans&#39;</span><span class="p">;</span> <span class="c1">// uncomment this statement to force tspans</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-9" id="section-9">&#182;</a>
</div>
<p>force_wrap_method = &#39;foreignobjects&#39;; // uncomment this statement to force foreignobjects</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-10" id="section-10">&#182;</a>
</div>
<p>exit immediately if something in this location
has already been defined; the plugin will defer to whatever
else you&#39;re doing in your code</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="k">if</span><span class="p">(</span><span class="nx">d3</span><span class="p">.</span><span class="nx">selection</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">textwrap</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-11" id="section-11">&#182;</a>
</div>
<p>double check the force_wrap_method flag
and reset if someone screwed up the above
settings</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">force_wrap_method</span> <span class="o">==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">force_wrap_method</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-12" id="section-12">&#182;</a>
</div>
<p>create the plugin method twice, both for regular use
and again for use inside the enter() selection</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">d3</span><span class="p">.</span><span class="nx">selection</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">textwrap</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">selection</span><span class="p">.</span><span class="nx">enter</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">textwrap</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">bounds</span><span class="p">,</span> <span class="nx">padding</span><span class="p">)</span> <span class="p">{</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-13" id="section-13">&#182;</a>
</div>
<p>default value of padding is zero if it&#39;s undefined</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="kd">var</span> <span class="nx">padding</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">padding</span><span class="p">)</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-14" id="section-14">&#182;</a>
</div>
<p>save callee into a variable so we can continue to refer to it
as the function scope changes</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="kd">var</span> <span class="nx">selection</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-15" id="section-15">&#182;</a>
</div>
<p>create a variable to store desired return values in</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="kd">var</span> <span class="nx">return_value</span><span class="p">;</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-16" id="section-16">&#182;</a>
</div>
<p>extract wrap boundaries from any d3-selected rect and return them
in a format that matches the simpler object argument option</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="kd">var</span> <span class="nx">extract_bounds</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">bounds</span><span class="p">)</span> <span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-17" id="section-17">&#182;</a>
</div>
<p>discard the nested array wrappers added by d3</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="kd">var</span> <span class="nx">bounding_rect</span> <span class="o">=</span> <span class="nx">bounds</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-18" id="section-18">&#182;</a>
</div>
<p>sanitize the svg element name so we can test against it</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="kd">var</span> <span class="nx">element_type</span> <span class="o">=</span> <span class="nx">bounding_rect</span><span class="p">.</span><span class="nx">tagName</span><span class="p">.</span><span class="nx">toString</span><span class="p">();</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-19" id="section-19">&#182;</a>
</div>
<p>if it&#39;s not a rect, exit</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="k">if</span><span class="p">(</span><span class="nx">element_type</span> <span class="o">!==</span> <span class="s1">&#39;rect&#39;</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-20" id="section-20">&#182;</a>
</div>
<p>if it&#39;s a rect, proceed to extracting the position attributes</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">bounds_extracted</span> <span class="o">=</span> <span class="p">{};</span>
                <span class="nx">bounds_extracted</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="nx">bounding_rect</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;x&#39;</span><span class="p">)</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span>
                <span class="nx">bounds_extracted</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="nx">bounding_rect</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;y&#39;</span><span class="p">)</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span>
                <span class="nx">bounds_extracted</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="nx">bounding_rect</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;width&#39;</span><span class="p">)</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span>
                <span class="nx">bounds_extracted</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="nx">bounding_rect</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;height&#39;</span><span class="p">)</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-21" id="section-21">&#182;</a>
</div>
<p>also pass along the getter function</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="nx">bounds_extracted</span><span class="p">.</span><span class="nx">attr</span> <span class="o">=</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">attr</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="k">return</span> <span class="nx">bounds_extracted</span><span class="p">;</span>
        <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-22" id="section-22">&#182;</a>
</div>
<p>double check the input argument for the wrapping
boundaries to make sure it actually contains all
the information we&#39;ll need in order to wrap successfully</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="kd">var</span> <span class="nx">verify_bounds</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">bounds</span><span class="p">)</span> <span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-23" id="section-23">&#182;</a>
</div>
<p>quickly add a simple getter method so you can use either
bounds.x or bounds.attr(&#39;x&#39;) as your notation,
the latter being a common convention among D3
developers</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">bounds</span><span class="p">.</span><span class="nx">attr</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">property</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">[</span><span class="nx">property</span><span class="p">])</span> <span class="p">{</span>
                        <span class="k">return</span> <span class="k">this</span><span class="p">[</span><span class="nx">property</span><span class="p">];</span>
                    <span class="p">}</span>
                <span class="p">}</span>
            <span class="p">}</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-24" id="section-24">&#182;</a>
</div>
<p>if it&#39;s an associative array, make sure it has all the
necessary properties represented directly</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="k">if</span><span class="p">(</span>
                <span class="p">(</span><span class="k">typeof</span> <span class="nx">bounds</span> <span class="o">==</span> <span class="s1">&#39;object&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span>
                <span class="p">(</span><span class="k">typeof</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">x</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span>
                <span class="p">(</span><span class="k">typeof</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">y</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span>
                <span class="p">(</span><span class="k">typeof</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span>
                <span class="p">(</span><span class="k">typeof</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-25" id="section-25">&#182;</a>
</div>
<p>if that&#39;s the case, then the bounds are fine</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="p">)</span> <span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-26" id="section-26">&#182;</a>
</div>
<p>return the lightly modified bounds</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="k">return</span> <span class="nx">bounds</span><span class="p">;</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-27" id="section-27">&#182;</a>
</div>
<p>if it&#39;s a numerically indexed array, assume it&#39;s a
d3-selected rect and try to extract the positions</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-28" id="section-28">&#182;</a>
</div>
<p>first try to make sure it&#39;s an array using Array.isArray</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="p">(</span>
            <span class="p">(</span><span class="k">typeof</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">isArray</span> <span class="o">==</span> <span class="s1">&#39;function&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span>
            <span class="p">(</span><span class="nb">Array</span><span class="p">.</span><span class="nx">isArray</span><span class="p">(</span><span class="nx">bounds</span><span class="p">))</span>
            <span class="p">)</span> <span class="o">||</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-29" id="section-29">&#182;</a>
</div>
<p>but since Array.isArray isn&#39;t always supported, fall
back to casting to the object to string when it&#39;s not</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="p">(</span><span class="nb">Object</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">toString</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">bounds</span><span class="p">)</span> <span class="o">===</span> <span class="s1">&#39;[object Array]&#39;</span><span class="p">)</span>
            <span class="p">)</span> <span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-30" id="section-30">&#182;</a>
</div>
<p>once you&#39;re sure it&#39;s an array, extract the boundaries
from the rect</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="kd">var</span> <span class="nx">extracted_bounds</span> <span class="o">=</span> <span class="nx">extract_bounds</span><span class="p">(</span><span class="nx">bounds</span><span class="p">);</span>
                <span class="k">return</span> <span class="nx">extracted_bounds</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-31" id="section-31">&#182;</a>
</div>
<p>but if the bounds are neither an object nor a numerical
array, then the bounds argument is invalid and you&#39;ll
need to fix it</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">}</span>

        <span class="kd">var</span> <span class="nx">apply_padding</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">bounds</span><span class="p">,</span> <span class="nx">padding</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">padded_bounds</span> <span class="o">=</span> <span class="nx">bounds</span><span class="p">;</span>
            <span class="k">if</span><span class="p">(</span><span class="nx">padding</span> <span class="o">!==</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">padded_bounds</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">padded_bounds</span><span class="p">.</span><span class="nx">x</span><span class="p">)</span> <span class="o">+</span> <span class="nx">padding</span><span class="p">;</span>
                <span class="nx">padded_bounds</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">padded_bounds</span><span class="p">.</span><span class="nx">y</span><span class="p">)</span> <span class="o">+</span> <span class="nx">padding</span><span class="p">;</span>
                <span class="nx">padded_bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o">-=</span> <span class="nx">padding</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;</span>
                <span class="nx">padded_bounds</span><span class="p">.</span><span class="nx">height</span> <span class="o">-=</span> <span class="nx">padding</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="k">return</span> <span class="nx">padded_bounds</span><span class="p">;</span>
        <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-32" id="section-32">&#182;</a>
</div>
<p>verify bounds</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="kd">var</span> <span class="nx">verified_bounds</span> <span class="o">=</span> <span class="nx">verify_bounds</span><span class="p">(</span><span class="nx">bounds</span><span class="p">);</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-33" id="section-33">&#182;</a>
</div>
<p>modify bounds if a padding value is provided</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="k">if</span><span class="p">(</span><span class="nx">padding</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">verified_bounds</span> <span class="o">=</span> <span class="nx">apply_padding</span><span class="p">(</span><span class="nx">verified_bounds</span><span class="p">,</span> <span class="nx">padding</span><span class="p">);</span>
        <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-34" id="section-34">&#182;</a>
</div>
<p>check that we have the necessary conditions for this function to operate properly</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="k">if</span><span class="p">(</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-35" id="section-35">&#182;</a>
</div>
<p>selection it&#39;s operating on cannot be not empty</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="p">(</span><span class="nx">selection</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span> <span class="o">||</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-36" id="section-36">&#182;</a>
</div>
<p>d3 must be available</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="p">(</span><span class="o">!</span><span class="nx">d3</span><span class="p">)</span> <span class="o">||</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-37" id="section-37">&#182;</a>
</div>
<p>desired wrapping bounds must be provided as an input argument</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="p">(</span><span class="o">!</span><span class="nx">bounds</span><span class="p">)</span> <span class="o">||</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-38" id="section-38">&#182;</a>
</div>
<p>input bounds must validate</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="p">(</span><span class="o">!</span><span class="nx">verified_bounds</span><span class="p">)</span>
        <span class="p">)</span> <span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-39" id="section-39">&#182;</a>
</div>
<p>try to return the calling selection if possible
so as not to interfere with methods downstream in the
chain</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="k">if</span><span class="p">(</span><span class="nx">selection</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">selection</span><span class="p">;</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-40" id="section-40">&#182;</a>
</div>
<p>if all else fails, just return false. if you hit this point then you&#39;re
almost certainly trying to call the textwrap() method on something that
doesn&#39;t make sense!</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
            <span class="p">}</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-41" id="section-41">&#182;</a>
</div>
<p>if we&#39;ve validated everything then we can finally proceed
to the meat of this operation</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-42" id="section-42">&#182;</a>
</div>
<p>reassign the verified bounds as the set we want
to work with from here on; this ensures that we&#39;re
using the same data structure for our bounds regardless
of whether the input argument was a simple object or
a d3 selection</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="nx">bounds</span> <span class="o">=</span> <span class="nx">verified_bounds</span><span class="p">;</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-43" id="section-43">&#182;</a>
</div>
<p>wrap using html and foreignObjects if they are supported</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="kd">var</span> <span class="nx">wrap_with_foreignobjects</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-44" id="section-44">&#182;</a>
</div>
<p>establish variables to quickly reference target nodes later</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="kd">var</span> <span class="nx">parent</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="nx">item</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">parentNode</span><span class="p">);</span>
                <span class="kd">var</span> <span class="nx">text_node</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">&#39;text&#39;</span><span class="p">);</span>
                <span class="kd">var</span> <span class="nx">styled_line_height</span> <span class="o">=</span> <span class="nx">text_node</span><span class="p">.</span><span class="nx">style</span><span class="p">(</span><span class="s1">&#39;line-height&#39;</span><span class="p">);</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-45" id="section-45">&#182;</a>
</div>
<p>extract our desired content from the single text element</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="kd">var</span> <span class="nx">text_to_wrap</span> <span class="o">=</span> <span class="nx">text_node</span><span class="p">.</span><span class="nx">text</span><span class="p">();</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-46" id="section-46">&#182;</a>
</div>
<p>remove the text node and replace with a foreign object</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="nx">text_node</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span>
                <span class="kd">var</span> <span class="nx">foreign_object</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;foreignObject&#39;</span><span class="p">);</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-47" id="section-47">&#182;</a>
</div>
<p>add foreign object and set dimensions, position, etc</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="nx">foreign_object</span>
                    <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;requiredFeatures&quot;</span><span class="p">,</span> <span class="s2">&quot;http://www.w3.org/TR/SVG11/feature#Extensibility&quot;</span><span class="p">)</span>
                    <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;x&#39;</span><span class="p">,</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">x</span><span class="p">)</span>
                    <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;y&#39;</span><span class="p">,</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">y</span><span class="p">)</span>
                    <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;width&#39;</span><span class="p">,</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span><span class="p">)</span>
                    <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;height&#39;</span><span class="p">,</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">);</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-48" id="section-48">&#182;</a>
</div>
<p>insert an HTML div</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="kd">var</span> <span class="nx">wrap_div</span> <span class="o">=</span> <span class="nx">foreign_object</span>
                    <span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;xhtml:div&#39;</span><span class="p">)</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-49" id="section-49">&#182;</a>
</div>
<p>this class is currently hardcoded
probably not necessary but easy to
override using .classed() and for now
it&#39;s nice to avoid a litany of input
arguments</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                    <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span> <span class="s1">&#39;wrapped&#39;</span><span class="p">);</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-50" id="section-50">&#182;</a>
</div>
<p>set div to same dimensions as foreign object</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="nx">wrap_div</span>
                    <span class="p">.</span><span class="nx">style</span><span class="p">(</span><span class="s1">&#39;height&#39;</span><span class="p">,</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span>
                    <span class="p">.</span><span class="nx">style</span><span class="p">(</span><span class="s1">&#39;width&#39;</span><span class="p">,</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span><span class="p">)</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-51" id="section-51">&#182;</a>
</div>
<p>insert text content</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                    <span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">text_to_wrap</span><span class="p">);</span>
                <span class="k">if</span><span class="p">(</span><span class="nx">styled_line_height</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">wrap_div</span><span class="p">.</span><span class="nx">style</span><span class="p">(</span><span class="s1">&#39;line-height&#39;</span><span class="p">,</span> <span class="nx">styled_line_height</span><span class="p">);</span>
                <span class="p">}</span>
                <span class="nx">return_value</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">&#39;foreignObject&#39;</span><span class="p">);</span>
            <span class="p">}</span>



</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-52" id="section-52">&#182;</a>
</div>
<p>wrap with tspans if foreignObject is undefined</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="kd">var</span> <span class="nx">wrap_with_tspans</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-53" id="section-53">&#182;</a>
</div>
<p>operate on the first text item in the selection</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="kd">var</span> <span class="nx">text_node</span> <span class="o">=</span> <span class="nx">item</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
                <span class="kd">var</span> <span class="nx">parent</span> <span class="o">=</span> <span class="nx">text_node</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
                <span class="kd">var</span> <span class="nx">text_node_selected</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="nx">text_node</span><span class="p">);</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-54" id="section-54">&#182;</a>
</div>
<p>measure initial size of the text node as rendered</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="kd">var</span> <span class="nx">text_node_height</span> <span class="o">=</span> <span class="nx">text_node</span><span class="p">.</span><span class="nx">getBBox</span><span class="p">().</span><span class="nx">height</span><span class="p">;</span>
                <span class="kd">var</span> <span class="nx">text_node_width</span> <span class="o">=</span> <span class="nx">text_node</span><span class="p">.</span><span class="nx">getBBox</span><span class="p">().</span><span class="nx">width</span><span class="p">;</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-55" id="section-55">&#182;</a>
</div>
<p>figure out the line height, either from rendered height
of the font or attached styling</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="kd">var</span> <span class="nx">line_height</span><span class="p">;</span>
                <span class="kd">var</span> <span class="nx">rendered_line_height</span> <span class="o">=</span> <span class="nx">text_node_height</span><span class="p">;</span>
                <span class="kd">var</span> <span class="nx">styled_line_height</span> <span class="o">=</span> <span class="nx">text_node_selected</span><span class="p">.</span><span class="nx">style</span><span class="p">(</span><span class="s1">&#39;line-height&#39;</span><span class="p">);</span>
                <span class="k">if</span><span class="p">(</span>
                    <span class="p">(</span><span class="nx">styled_line_height</span><span class="p">)</span> <span class="o">&amp;&amp;</span>
                    <span class="p">(</span><span class="nb">parseInt</span><span class="p">(</span><span class="nx">styled_line_height</span><span class="p">))</span>
                <span class="p">)</span> <span class="p">{</span>
                    <span class="nx">line_height</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">styled_line_height</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;px&#39;</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">));</span>
                <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                    <span class="nx">line_height</span> <span class="o">=</span> <span class="nx">rendered_line_height</span><span class="p">;</span>
                <span class="p">}</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-56" id="section-56">&#182;</a>
</div>
<p>only fire the rest of this if the text content
overflows the desired dimensions</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="k">if</span><span class="p">(</span><span class="nx">text_node_width</span> <span class="o">&gt;</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span><span class="p">)</span> <span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-57" id="section-57">&#182;</a>
</div>
<p>store whatever is inside the text node
in a variable and then zero out the
initial content; we&#39;ll reinsert in a moment
using tspan elements.</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                    <span class="kd">var</span> <span class="nx">text_to_wrap</span> <span class="o">=</span> <span class="nx">text_node_selected</span><span class="p">.</span><span class="nx">text</span><span class="p">();</span>
                    <span class="nx">text_node_selected</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
                    <span class="k">if</span><span class="p">(</span><span class="nx">text_to_wrap</span><span class="p">)</span> <span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-58" id="section-58">&#182;</a>
</div>
<p>keep track of whether we are splitting by spaces
so we know whether to reinsert those spaces later</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                        <span class="kd">var</span> <span class="nx">break_delimiter</span><span class="p">;</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-59" id="section-59">&#182;</a>
</div>
<p>split at spaces to create an array of individual words</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                        <span class="kd">var</span> <span class="nx">text_to_wrap_array</span><span class="p">;</span>
                        <span class="k">if</span><span class="p">(</span><span class="nx">text_to_wrap</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39; &#39;</span><span class="p">)</span> <span class="o">!==</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
                            <span class="kd">var</span> <span class="nx">break_delimiter</span> <span class="o">=</span> <span class="s1">&#39; &#39;</span><span class="p">;</span>
                            <span class="nx">text_to_wrap_array</span> <span class="o">=</span> <span class="nx">text_to_wrap</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39; &#39;</span><span class="p">);</span>
                        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-60" id="section-60">&#182;</a>
</div>
<p>if there are no spaces, figure out the split
points by comparing rendered text width against
bounds and translating that into character position
cuts</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                            <span class="nx">break_delimiter</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
                            <span class="kd">var</span> <span class="nx">string_length</span> <span class="o">=</span> <span class="nx">text_to_wrap</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
                            <span class="kd">var</span> <span class="nx">number_of_substrings</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">ceil</span><span class="p">(</span><span class="nx">text_node_width</span> <span class="o">/</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span><span class="p">);</span>
                            <span class="kd">var</span> <span class="nx">splice_interval</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">string_length</span> <span class="o">/</span> <span class="nx">number_of_substrings</span><span class="p">);</span>
                            <span class="k">if</span><span class="p">(</span>
                                <span class="o">!</span><span class="p">(</span><span class="nx">splice_interval</span> <span class="o">*</span> <span class="nx">number_of_substrings</span> <span class="o">&gt;=</span> <span class="nx">string_length</span><span class="p">)</span>
                            <span class="p">)</span> <span class="p">{</span>
                                <span class="nx">number_of_substrings</span><span class="o">++</span><span class="p">;</span>
                            <span class="p">}</span>
                            <span class="kd">var</span> <span class="nx">text_to_wrap_array</span> <span class="o">=</span> <span class="p">[];</span>
                            <span class="kd">var</span> <span class="nx">substring</span><span class="p">;</span>
                            <span class="kd">var</span> <span class="nx">start_position</span><span class="p">;</span>
                            <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">number_of_substrings</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                                <span class="nx">start_position</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">*</span> <span class="nx">splice_interval</span><span class="p">;</span>
                                <span class="nx">substring</span> <span class="o">=</span> <span class="nx">text_to_wrap</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="nx">start_position</span><span class="p">,</span> <span class="nx">splice_interval</span><span class="p">);</span>
                                <span class="nx">text_to_wrap_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">substring</span><span class="p">);</span>
                            <span class="p">}</span>
                        <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-61" id="section-61">&#182;</a>
</div>
<p>new array where we&#39;ll store the words re-assembled into
substrings that have been tested against the desired
maximum wrapping width</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                        <span class="kd">var</span> <span class="nx">substrings</span> <span class="o">=</span> <span class="p">[];</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-62" id="section-62">&#182;</a>
</div>
<p>computed text length is arguably incorrectly reported for
all tspans after the first one, in that they will include
the width of previous separate tspans. to compensate we need
to manually track the computed text length of all those
previous tspans and substrings, and then use that to offset
the miscalculation. this then gives us the actual correct
position we want to use in rendering the text in the SVG.</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                        <span class="kd">var</span> <span class="nx">total_offset</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-63" id="section-63">&#182;</a>
</div>
<p>object for storing the results of text length computations later</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                        <span class="kd">var</span> <span class="nx">temp</span> <span class="o">=</span> <span class="p">{};</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-64" id="section-64">&#182;</a>
</div>
<p>loop through the words and test the computed text length
of the string against the maximum desired wrapping width</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                        <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">text_to_wrap_array</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                            <span class="kd">var</span> <span class="nx">word</span> <span class="o">=</span> <span class="nx">text_to_wrap_array</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
                            <span class="kd">var</span> <span class="nx">previous_string</span> <span class="o">=</span> <span class="nx">text_node_selected</span><span class="p">.</span><span class="nx">text</span><span class="p">();</span>
                            <span class="kd">var</span> <span class="nx">previous_width</span> <span class="o">=</span> <span class="nx">text_node</span><span class="p">.</span><span class="nx">getComputedTextLength</span><span class="p">();</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-65" id="section-65">&#182;</a>
</div>
<p>initialize the current word as the first word
or append to the previous string if one exists</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                            <span class="kd">var</span> <span class="nx">new_string</span><span class="p">;</span>
                            <span class="k">if</span><span class="p">(</span><span class="nx">previous_string</span><span class="p">)</span> <span class="p">{</span>
                                <span class="nx">new_string</span> <span class="o">=</span> <span class="nx">previous_string</span> <span class="o">+</span> <span class="nx">break_delimiter</span> <span class="o">+</span> <span class="nx">word</span><span class="p">;</span>
                            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                                <span class="nx">new_string</span> <span class="o">=</span> <span class="nx">word</span><span class="p">;</span>
                            <span class="p">}</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-66" id="section-66">&#182;</a>
</div>
<p>add the newest substring back to the text node and
measure the length</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                            <span class="nx">text_node_selected</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">new_string</span><span class="p">);</span>
                            <span class="kd">var</span> <span class="nx">new_width</span> <span class="o">=</span> <span class="nx">text_node</span><span class="p">.</span><span class="nx">getComputedTextLength</span><span class="p">();</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-67" id="section-67">&#182;</a>
</div>
<p>adjust the length by the offset we&#39;ve tracked
due to the misreported length discussed above</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                            <span class="kd">var</span> <span class="nx">test_width</span> <span class="o">=</span> <span class="nx">new_width</span> <span class="o">-</span> <span class="nx">total_offset</span><span class="p">;</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-68" id="section-68">&#182;</a>
</div>
<p>if our latest version of the string is too
big for the bounds, use the previous
version of the string (without the newest word
added) and use the latest word to restart the
process with a new tspan</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                            <span class="k">if</span><span class="p">(</span><span class="nx">new_width</span> <span class="o">&gt;</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span><span class="p">)</span> <span class="p">{</span>
                                <span class="k">if</span><span class="p">(</span>
                                    <span class="p">(</span><span class="nx">previous_string</span><span class="p">)</span> <span class="o">&amp;&amp;</span>
                                    <span class="p">(</span><span class="nx">previous_string</span> <span class="o">!==</span> <span class="s1">&#39;&#39;</span><span class="p">)</span>
                                <span class="p">)</span> <span class="p">{</span>
                                    <span class="nx">total_offset</span> <span class="o">=</span> <span class="nx">total_offset</span> <span class="o">+</span> <span class="nx">previous_width</span><span class="p">;</span>
                                    <span class="nx">temp</span> <span class="o">=</span> <span class="p">{</span><span class="nx">string</span><span class="o">:</span> <span class="nx">previous_string</span><span class="p">,</span> <span class="nx">width</span><span class="o">:</span> <span class="nx">previous_width</span><span class="p">,</span> <span class="nx">offset</span><span class="o">:</span> <span class="nx">total_offset</span><span class="p">};</span>
                                    <span class="nx">substrings</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">temp</span><span class="p">);</span>
                                    <span class="nx">text_node_selected</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
                                    <span class="nx">text_node_selected</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">word</span><span class="p">);</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-69" id="section-69">&#182;</a>
</div>
<p>Handle case where there is just one more word to be wrapped</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                                    <span class="k">if</span><span class="p">(</span><span class="nx">i</span> <span class="o">==</span> <span class="nx">text_to_wrap_array</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
                                        <span class="nx">new_string</span> <span class="o">=</span> <span class="nx">word</span><span class="p">;</span>
                                        <span class="nx">text_node_selected</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">new_string</span><span class="p">);</span>
                                        <span class="nx">new_width</span> <span class="o">=</span> <span class="nx">text_node</span><span class="p">.</span><span class="nx">getComputedTextLength</span><span class="p">();</span>
                                    <span class="p">}</span>
                                <span class="p">}</span>
                            <span class="p">}</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-70" id="section-70">&#182;</a>
</div>
<p>if we&#39;re up to the last word in the array,
get the computed length as is without
appending anything further to it</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                            <span class="k">if</span><span class="p">(</span><span class="nx">i</span> <span class="o">==</span> <span class="nx">text_to_wrap_array</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
                                <span class="nx">text_node_selected</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
                                <span class="kd">var</span> <span class="nx">final_string</span> <span class="o">=</span> <span class="nx">new_string</span><span class="p">;</span>
                                <span class="k">if</span><span class="p">(</span>
                                    <span class="p">(</span><span class="nx">final_string</span><span class="p">)</span> <span class="o">&amp;&amp;</span>
                                    <span class="p">(</span><span class="nx">final_string</span> <span class="o">!==</span> <span class="s1">&#39;&#39;</span><span class="p">)</span>
                                <span class="p">)</span> <span class="p">{</span>
                                    <span class="k">if</span><span class="p">((</span><span class="nx">new_width</span> <span class="o">-</span> <span class="nx">total_offset</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span><span class="nx">new_width</span> <span class="o">=</span> <span class="nx">new_width</span> <span class="o">-</span> <span class="nx">total_offset</span><span class="p">}</span>
                                    <span class="nx">temp</span> <span class="o">=</span> <span class="p">{</span><span class="nx">string</span><span class="o">:</span> <span class="nx">final_string</span><span class="p">,</span> <span class="nx">width</span><span class="o">:</span> <span class="nx">new_width</span><span class="p">,</span> <span class="nx">offset</span><span class="o">:</span> <span class="nx">total_offset</span><span class="p">};</span>
                                    <span class="nx">substrings</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">temp</span><span class="p">);</span>
                                <span class="p">}</span>
                            <span class="p">}</span>
                        <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-71" id="section-71">&#182;</a>
</div>
<p>append each substring as a tspan</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                        <span class="kd">var</span> <span class="nx">current_tspan</span><span class="p">;</span>
                        <span class="kd">var</span> <span class="nx">tspan_count</span><span class="p">;</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-72" id="section-72">&#182;</a>
</div>
<p>double check that the text content has been removed
before we start appending tspans</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                        <span class="nx">text_node_selected</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
                        <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">substrings</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                            <span class="kd">var</span> <span class="nx">substring</span> <span class="o">=</span> <span class="nx">substrings</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">string</span><span class="p">;</span>
                            <span class="k">if</span><span class="p">(</span><span class="nx">i</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
                                <span class="kd">var</span> <span class="nx">previous_substring</span> <span class="o">=</span> <span class="nx">substrings</span><span class="p">[</span><span class="nx">i</span> <span class="o">-</span> <span class="mi">1</span><span class="p">];</span>
                            <span class="p">}</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-73" id="section-73">&#182;</a>
</div>
<p>only append if we&#39;re sure it won&#39;t make the tspans
overflow the bounds.</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                            <span class="k">if</span><span class="p">((</span><span class="nx">i</span><span class="p">)</span> <span class="o">*</span> <span class="nx">line_height</span> <span class="o">&lt;</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span> <span class="o">-</span> <span class="p">(</span><span class="nx">line_height</span> <span class="o">*</span> <span class="mf">1.5</span><span class="p">))</span> <span class="p">{</span>
                                <span class="nx">current_tspan</span> <span class="o">=</span> <span class="nx">text_node_selected</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;tspan&#39;</span><span class="p">)</span>
                                    <span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">substring</span><span class="p">);</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-74" id="section-74">&#182;</a>
</div>
<p>vertical shift to all tspans after the first one</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                                <span class="nx">current_tspan</span>
                                    <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;dy&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                                        <span class="k">if</span><span class="p">(</span><span class="nx">i</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
                                            <span class="k">return</span> <span class="nx">line_height</span><span class="p">;</span>
                                        <span class="p">}</span>
                                    <span class="p">});</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-75" id="section-75">&#182;</a>
</div>
<p>shift left from default position, which
is probably based on the full length of the
text string until we make this adjustment</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                                <span class="nx">current_tspan</span>
                                    <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;x&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
                                        <span class="kd">var</span> <span class="nx">x_offset</span> <span class="o">=</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">x</span><span class="p">;</span>
                                        <span class="k">if</span><span class="p">(</span><span class="nx">padding</span><span class="p">)</span> <span class="p">{</span><span class="nx">x_offset</span> <span class="o">+=</span> <span class="nx">padding</span><span class="p">;}</span>
                                        <span class="k">return</span> <span class="nx">x_offset</span><span class="p">;</span>
                                    <span class="p">});</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-76" id="section-76">&#182;</a>
</div>

<div class="highlight"><pre><code>                               <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;dx&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
                                   <span class="k">if</span><span class="p">(</span><span class="nx">i</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
                                       <span class="kd">var</span> <span class="nx">render_offset</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
                                   <span class="p">}</span> <span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="nx">i</span>  <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
                                       <span class="nx">render_offset</span> <span class="o">=</span> <span class="nx">substrings</span><span class="p">[</span><span class="nx">i</span> <span class="o">-</span> <span class="mi">1</span><span class="p">].</span><span class="nx">width</span><span class="p">;</span>
                                       <span class="nx">render_offset</span> <span class="o">=</span> <span class="nx">render_offset</span> <span class="o">*</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
                                   <span class="p">}</span>
                                   <span class="k">return</span> <span class="nx">render_offset</span><span class="p">;</span>
                               <span class="p">});</span>
</code></pre></div>


        </td>
        <td class="code highlight"><div class="highlight"><pre>
                            <span class="p">}</span>
                        <span class="p">}</span>
                    <span class="p">}</span>
                <span class="p">}</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-77" id="section-77">&#182;</a>
</div>
<p>position the overall text node, whether wrapped or not</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="nx">text_node_selected</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;y&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
                    <span class="kd">var</span> <span class="nx">y_offset</span> <span class="o">=</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">y</span><span class="p">;</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-78" id="section-78">&#182;</a>
</div>
<p>shift by line-height to move the baseline into
the bounds – otherwise the text baseline would be
at the top of the bounds</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                    <span class="k">if</span><span class="p">(</span><span class="nx">line_height</span><span class="p">)</span> <span class="p">{</span><span class="nx">y_offset</span> <span class="o">+=</span> <span class="nx">line_height</span><span class="p">;}</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-79" id="section-79">&#182;</a>
</div>
<p>shift by padding, if it&#39;s there</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                    <span class="k">if</span><span class="p">(</span><span class="nx">padding</span><span class="p">)</span> <span class="p">{</span><span class="nx">y_offset</span> <span class="o">+=</span> <span class="nx">padding</span><span class="p">;}</span>
                    <span class="k">return</span> <span class="nx">y_offset</span><span class="p">;</span>
                <span class="p">});</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-80" id="section-80">&#182;</a>
</div>
<p>shift to the right by the padding value</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="nx">text_node_selected</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;x&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
                    <span class="kd">var</span> <span class="nx">x_offset</span> <span class="o">=</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">x</span><span class="p">;</span>
                    <span class="k">if</span><span class="p">(</span><span class="nx">padding</span><span class="p">)</span> <span class="p">{</span><span class="nx">x_offset</span> <span class="o">+=</span> <span class="nx">padding</span><span class="p">;}</span>
                    <span class="k">return</span> <span class="nx">x_offset</span><span class="p">;</span>
                <span class="p">});</span>



</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-81" id="section-81">&#182;</a>
</div>
<p>assign our modified text node with tspans
to the return value</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="nx">return_value</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="nx">parent</span><span class="p">).</span><span class="nx">selectAll</span><span class="p">(</span><span class="s1">&#39;text&#39;</span><span class="p">);</span>
            <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-82" id="section-82">&#182;</a>
</div>
<p>variable used to hold the functions that let us
switch between the wrap methods</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="kd">var</span> <span class="nx">wrap_method</span><span class="p">;</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-83" id="section-83">&#182;</a>
</div>
<p>if a wrap method if being forced, assign that
function</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="k">if</span><span class="p">(</span><span class="nx">force_wrap_method</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">if</span><span class="p">(</span><span class="nx">force_wrap_method</span> <span class="o">==</span> <span class="s1">&#39;foreignobjects&#39;</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">wrap_method</span> <span class="o">=</span> <span class="nx">wrap_with_foreignobjects</span><span class="p">;</span>
                <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">force_wrap_method</span> <span class="o">==</span> <span class="s1">&#39;tspans&#39;</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">wrap_method</span> <span class="o">=</span> <span class="nx">wrap_with_tspans</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-84" id="section-84">&#182;</a>
</div>
<p>if no wrap method is being forced, then instead
test for browser support of foreignobject and
use whichever wrap method makes sense accordingly</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">force_wrap_method</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">SVGForeignObjectElement</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">wrap_method</span> <span class="o">=</span> <span class="nx">wrap_with_foreignobjects</span><span class="p">;</span>
                <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                    <span class="nx">wrap_method</span> <span class="o">=</span> <span class="nx">wrap_with_tspans</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-85" id="section-85">&#182;</a>
</div>
<p>run the desired wrap function for each item
in the d3 selection that called .textwrap()</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">selection</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">item</span> <span class="o">=</span> <span class="nx">selection</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
                <span class="nx">wrap_method</span><span class="p">(</span><span class="nx">item</span><span class="p">);</span>
            <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-86" id="section-86">&#182;</a>
</div>
<p>return the modified nodes so we can chain other
methods to them.</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="k">return</span> <span class="nx">return_value</span><span class="p">;</span>

        <span class="p">}</span>

    <span class="p">}</span>

<span class="p">})();</span>
<span class="cm">/* jshint ignore:end */</span>
</pre></div>
        </td>
      </tr>
  </tbody>
</table>
  </div>
</body>
</html>