D3上的Angular：如何在Angular指令中使用d3插件

我已经在我的角度应用中使用d3，就像它在这个BLOG POST中描述的一样。但是，我想在我的应用程序中使用名为fisheye的D3-PLUGIN。我已经安装了包括依赖关系的凉亭：D3上的Angular：如何在Angular指令中使用d3插件

"d3-plugins-fisheye": "https://raw.githubusercontent.com/d3/d3-plugins/master/fisheye/fisheye.js"

之后，我将该文件包含在我的index.html中。加载工作正常。

<script src="bower_components/d3-plugins-fisheye/index.js"></script>

但是我不能在我的d3指令中使用var fisheye = d3.fisheye.circular().radius(120);。 D3工作正常。我已经尝试过通过服务来加载额外的插件：

angular.module('fisheye', []) 
    .factory('fisheyeService', ['$document', '$q', '$rootScope', function($document, $q, $rootScope) { 
    var d = $q.defer(); 
    function onScriptLoad() { 
    // Load client in the browser 
    $rootScope.$apply(function() { d.resolve(window.fisheye); }); 
    } 
    // Create a script tag with fisheye 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 = 'bower_components/d3-plugins-fisheye/index.js'; 
    scriptTag.onreadystatechange = function() { 
    if (this.readyState === 'complete') { onScriptLoad(); } 
    }; 
    scriptTag.onload = onScriptLoad; 

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

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

在我的D3指令与使用它：

d3Service.d3().then(function(d3) { 
    fisheyeService.fisheye().then(function(fisheye) { 

    ... 

    var fisheye = d3.fisheye.circular().radius(120); 
    //var fisheye = fisheye.circular().radius(120); 

    ... 

    }); 
});

但它仍然没有工作。有谁知道如何在我的指令中加载额外的d3插件？

来源

2014-10-30 Robin Wieruch

我没有使用从我的问题fisheyeService我的指令，这样解决这个问题：

fisheyeService.fisheye().then(function() { 
    var fisheyePlugin = d3.fisheye; 
    d3Service.d3().then(function(d3) { 
    d3.fisheye = fisheyePlugin; 

    ... 

    var fisheye = d3.fisheye.circular().radius(120); 

    ...

可以使用this BLOG POST作进一步的说明。

来源

2014-10-31 13:31:23

D3上的Angular：如何在Angular指令中使用d3插件

回答

相关问题