title: loop over js array in d3 callback tree
body: <p>I would like to construct an SVG using d3 and the typical workflow is</p>
  <pre class="lang-js prettyprint-override"><code>    const g = this.svg.selectAll(&quot;g&quot;).data()
      .enter()
      .call(el =&gt; el.append(&quot;g&quot;)
        .attr(&quot;class&quot;, d =&gt; &quot;color&quot; + d.data.color)
        .call(el =&gt; el.append(&quot;title&quot;)
          .text(d =&gt; d.data.text)
        )
        .call(el =&gt; el.append(&quot;text&quot;)
          .attr(&quot;y&quot;, d =&gt; y(d.y0 + d.y1)/2)
          .attr(&quot;alignment-baseline&quot;, &quot;middle&quot;)
          .attr(&quot;text-anchor&quot;, &quot;middle&quot;)
          .attr(&quot;clip-path&quot;, d =&gt; &quot;url(#&quot; + &quot;cp&quot; + d.id + &quot;)&quot;)
          .call(el =&gt; // ...
  </code></pre>
  <p>The <code>d.data</code> object contains all the info, and amongst which is an <em>array</em> of strings. I would  like to loop over the array and <code>el.append</code> the items as <code>&quot;text&quot;</code> elements. I do not know how to access <code>d.data</code>, though, unless in an <code>attr</code>.</p>
  <p>Any hints?</p>