title: How can I use resource objects (via promises) with D3?
body: <p><strong>UPDATE:</strong> I realized that trying to perform the database lookups this late in the game was poor form -- I updated my code so that my raw data coming into D3 already included the information I would need to create my graph and everything works as expected.</p>
  
  <p>I'm trying to build a force-directed graph that performs a database lookup on node elements to get additional information regarding the node for further customization in the graph.</p>
  
  <p>In the below example, I am trying to use FontAwesome glyphs to create 'icons' for my nodes. Right now, in my <code>getIcon()</code> function, I correctly draw the node icon/glyph IF and ONLY IF I return the unicode value right away. Once I put a promise in and wait to return the value, things break. D3 is constructing and rendering the graph before the promise has a chance to return. How can I make <code>.text(getIcon)</code> wait to append text (a glyph icon) to a node until after we've resolved my promise?</p>
  
  <pre><code>node.append('text')
    .attr('text-anchor', 'middle')
    .attr('dominant-baseline', 'central')
    .style('font-family','FontAwesome')
    .style('font-size','24px')
    .text(getIcon)
    .style('fill', function (d) {
      return color(d.group);
    });
  </code></pre>
  
  <p><code>getIcon()</code> is defined as follows:</p>
  
  <pre><code>function getIcon(d) {
    myPromise.then(function(data) {
      if(data.value) {
        return '\uf108';
      } else { return '\uf233'; }
    });
  }
  </code></pre>