D3js Angular Directive For Area Chart Using D3.mouse Event For Tooltip

I have this http://plnkr.co/edit/fZXbWTGH4qTP4E9LkKyw?p=preview where if you hover over the area chart it should have shown the tooltip as the follow up from here roi value in tool

Solution 1:

The problem is that you loading d3 javascript as a service and in the code you are loading it directly script like this:

  <script src="https://d3js.org/d3.v3.min.js"></script>

And in the code you are creating d3service like this:

angular.module('d3', [])
    .factory('d3Service', ['$document', '$q', '$rootScope',
    function ($document, $q, $rootScope) {
            var d = $q.defer();

            function onScriptLoad() {
                // Load client in the browser
                $rootScope.$apply(function () {
                    d.resolve(window.d3);
                });
            }
            // Create a script tag with d3 as the source
            // and call our onScriptLoad callback when it
            // has been loaded
            var scriptTag = $document[0].createElement('script');
            scriptTag.type = 'text/javascript';
            scriptTag.async = true;
            scriptTag.src = 'https://d3js.org/d3.v3.min.js';
            scriptTag.onreadystatechange = function () {
                if (this.readyState == 'complete') onScriptLoad();
            }
            scriptTag.onload = onScriptLoad;

            var s = $document[0].getElementsByTagName('body')[0];
            s.appendChild(scriptTag);

            return {
                d3: function () {
                    return d.promise;
                }
            };
}]);

Well both are same..:)

The 2 d3 loaded conflicts is the root of the problem and you thus you are not able to get the mouse event in d3.

So the fix is remove d3service and use d3 directly in your code and it will work.

Working code here