javascript - 在 AngularJS 的数据可视化上下文中调用 D3 工具提示

Question

我正在使用 d3.tip

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

当我尝试启动它时它抛出异常(undefined 不是一个函数)

这是我的代码:

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);
                    });

这给了我以下异常

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

对于将 d3.tip 与 AngularJS 和 requireJS 一起使用有什么建议吗？

Answer 1

首先使用以下命令安装 d3-tip。

bower install d3-tip --save

之后你就可以使用 d3.tip 函数了。

d3.tip()

注意:如果使用angular不需要在app.js中注入(inject)