title: How can I set up a d3 chart inside a custom directive in Angular?
body: <p>I'v been following a few walkthroughs on how to implement d3 charts in an angular application. Basically, Im trying to implement the following <a href="https://bl.ocks.org/mbostock/4339083" rel="nofollow">d3 chart</a> into my custom angular directive ('workHistory'). For the purpose of this question, I'm following a simple bar chart <a href="http://codepen.io/odiseo42/pen/bCwkv?editors=1010" rel="nofollow">example</a> where I have it set up like so :</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
      &lt;html lang="en" ng-app="webApp"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
  
          &lt;title&gt;My Portfolio&lt;/title&gt;
  
          &lt;!--Stylesheets --&gt;
          &lt;link rel="stylesheet" href="styles/main.css"/&gt;
          &lt;link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/&gt;
          &lt;!--Libraries --&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="bower_components/angular-route/angular-route.min.js"&gt;&lt;/script&gt;
          &lt;script src="bower_components/angular-loader/angular-loader.min.js"&gt;&lt;/script&gt;
          &lt;script src="bower_components/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="bower_components/d3/d3.min.js"&gt;&lt;/script&gt;
          &lt;!--Module --&gt;
          &lt;script src="scripts/modules/module.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/modules/d3.module.js"&gt;&lt;/script&gt;
          &lt;!--Controllers --&gt;
          &lt;script src="scripts/controllers/mainHeroController.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/controllers/workHistoryController.js"&gt;&lt;/script&gt;
          &lt;!--Directives--&gt;
          &lt;script src="scripts/directives/mainHero.directive.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/directives/mainNavbar.directive.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/directives/workHistory.directive.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
       &lt;!--Main Landing Page--&gt;    
      &lt;body ng-app="webApp"&gt;
          &lt;div id="container1"&gt; 
              &lt;work-history chart-data="myData"&gt;&lt;/work-history&gt;
          &lt;/div&gt;
          &lt;div id="container2"&gt;
              Container 2
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><strong>workHistory.directive.js</strong></p>
  
  <pre><code>(function()
  {
      'use strict';
  
      angular
          .module('webApp')
          .directive('workHistory', workHistory);
  
      function workHistory()
      {
          var directive = 
              {
                  restrict: 'EA',
                  controller: 'WorkHistoryController',
                  //controllerAs: 'workhistory',
                  scope: {data: '=chartData'},
                  template: "&lt;svg width='850' height='200'&gt;&lt;/svg&gt;",
                  link: workHistoryLink,
              };
  
          return directive;
      }
  
      function workHistoryLink(scope, element/*, attrs, ctrl, tfn*/)
      {
  
         var chart = d3.select(element[0]);
          chart.append("div").attr("class", "chart")
           .selectAll('div')
           .data(scope.data).enter().append("div")
           .transition().ease("elastic")
           .style("width", function(d) { return d + "%"; })
           .text(function(d) { return d + "%"; });
           } 
  })();
  </code></pre>
  
  <p><strong>main.css</strong></p>
  
  <pre><code>.axis path,
  .axis line{
    fill: none;
    stroke:black;
    shape-rendering:crispEdge;
  }
  
  .axis text{
    font-family: sans-serif;
    font-size: 10px;
  }
  
  h1{
    font-family: sans-serif;
    font-weight: bold;
    font-size: 16px;
  }
  .tick
  {
    stroke-dasharray: 1, 2;
  }
  </code></pre>
  
  <p><strong>The Problem:</strong>
  With this code, nothing displays. I get the following error: </p>
  
  <blockquote>
    <p>angular.js:13920TypeError:
    chart.append(...).attr(...).selectAll(...).data(...).enter is not a
    function</p>
  </blockquote>
  
  <p>Can someone help me understand how to properly set this up? (Bonus, if someone can explain how I can get the collapsible tree d3 chart configured into a custom directive. </p>
  
  <p>Thanks.</p>