title: Calling D3 Tooltip in context of data visualization in AngularJS
body: <p>I'm using d3.tip</p>
  
  <p><a href="https://github.com/Caged/d3-tip" rel="nofollow">https://github.com/Caged/d3-tip</a></p>
  
  <p>and when I try to initiate it it throws exception (undefined isn't a function)</p>
  
  <p>Here's my code:</p>
  
  <pre><code>define([
  'angular',
  'app',
  'underscore',
  'jquery',
  'd3',
  'require',
  ],function (angular, app, _, $, d3, localRequire) {
      'use strict';
       var module = angular.module('myModule', []);
       app.useModule(module);
       module.controller('myController', function ($scope, dashboard, querySrv, filterSrv) { ..... }
  };
  
  
  module.directive('myDirective', function () {
          return {
              restrict: 'E',
              link: function (scope, element) {
  
                  scope.$on('render', function () {
                      render_panel();
                  });
  
                  angular.element(window).bind('resize', function () {
                      render_panel();
                  });
  
                  // Function for rendering panel
                  function render_panel() {
                      scope.require(['./d3-tip/d3tip'], function(){
                           var tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; });
                           var svg = ......;
                           svg.call(tip);
                      });
  </code></pre>
  
  <p>and this gives me the following exception</p>
  
  <pre><code>TypeError: undefined is not a function
      at Object.&lt;anonymous&gt; (http://localhost:8983/myproject/app/panels/heatmap/module.js:356:42)
  </code></pre>
  
  <p>Any suggestions for using d3.tip with AngularJS and requireJS ?</p>