javascript - 我如何转换 d3 force 指令图以与 angularjs 一起使用？

Question

我用普通的 javascript 创建了一个 D3 强制指令图。

这是 working D3 graph

现在我需要从服务获取数据并在 AngularJS 中生成图表。我怎样才能做出指令呢？任何示例或指导都会很棒。

我制作了一个 Controller 来从服务中获取数据。代码在这里:

 $scope.buildchart = function(widget) {
        var w2 = new Worker("scripts/webworkers/bigQueryWorker.js");           
        w2.postMessage($scope.selectedClass + "," 
          + $rootScope.hierarchystring.toString() 
          + "," + "Hierarchy" + "," + Digin_Engine_API);

        w2.addEventListener('message', function(event) {
            hierarchyRetrieved(event);
        });

        function hierarchyRetrieved(event) {
            var obj = JSON.parse(event.data);
            console.log("Hierarchy data is");
            console.log(JSON.stringify(obj));

        };
    };

有没有办法在这个函数中获取这些数据？

function loadImage() {}

Answer 1

你提供的代码对我来说有点重，但我会尝试用一些片段来说明你的情况:)

首先创建一个 DOM，您要在其中注入(inject)将生成 d3 图表的 Angular Directive(指令)。

这样做是这样的:

<svg linear-chart></svg>

这里 linear-chart 会触发指令。那么让我们看一个指令:

app.directive('linearChart', function () {
    return {
        restrict: 'EA',

        link: function (scope, elem, attrs) {
        //all your code for making the force layout
}});

下一个挑战是通过 web worker 完成的异步任务提取数据。

$scope.buildchart = function(widget) {
        var w2 = new Worker("scripts/webworkers/bigQueryWorker.js");           
        w2.postMessage($scope.selectedClass + "," + $rootScope.hierarchystring.toString() + "," + "Hierarchy" + "," + Digin_Engine_API);
        w2.addEventListener('message', function(event) {
            hierarchyRetrieved(event);
        });

        function hierarchyRetrieved(event) {
            var obj = JSON.parse(event.data);
            $scope.data = obj;//setting the data into the scope object.

        };
    };

所以现在只要您的异步任务完成，范围数据就会设置为那个。我们知道范围数据中的值会发生变化，因此我们需要一个监视函数，它会在 $scope.data

发生变化时触发链接函数

像这样

app.directive('linearChart', function () {
    return {
        restrict: 'EA',

        link: function (scope, elem, attrs) {
            //this will watch the scope data
            scope.$watch(
                "data",function(){/*your d3 code for making the forcelayout which will get triggred when scope.data changes :)
*/})...

这是一个小fiddle

注意:在这里，我通过在 loadData 函数中单击按钮来模拟您的 webworker 代码。

希望对您有所帮助! :)