CODEWITHSUNDEEP
javascriptangularjsd3.js
Kareem Elshahawy
Kareem Elshahawy

Reputation: 1421

Calling D3 Tooltip in context of data visualization in AngularJS

I'm using d3.tip

https://github.com/Caged/d3-tip

and when I try to initiate it it throws exception (undefined isn't a function)

Here's my 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);
                    });

and this gives me the following exception

TypeError: undefined is not a function
    at Object.<anonymous> (http://localhost:8983/myproject/app/panels/heatmap/module.js:356:42)

Any suggestions for using d3.tip with AngularJS and requireJS ?

Upvotes: 3

Views: 1053

Answers (3)

Umair Ahmed
Umair Ahmed

Reputation: 8787

First you install d3-tip using below command.

bower install d3-tip --save

after this you can able to use d3.tip function.

d3.tip()

Note: if you using angular does't need to inject in app.js

Upvotes: 1

Yianni
Yianni

Reputation: 69

define(['./d3'], function (d3) {
  d3.tip = factory(root.d3)
});

Upvotes: 0

ninjaPixel
ninjaPixel

Reputation: 6382

UPDATE A change has been made to the source code which fixes this: https://github.com/alanhamlett/d3-tip/blob/master/index.js

I was able to get d3-tip working with require.js by changing the following in the d3-tip.js source code.

Original:

  if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module with d3 as a dependency.
        define(['d3'], factory)            
    }

Modified:

  if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module with d3 as a dependency.
        root.d3.tip = factory(root.d3)
    }

Upvotes: 0

Related Questions