Question

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

现在我需要从服务获取数据并在AngularJS中生成图形。我该如何制定一个指令呢？任何例子或指导都会很棒。

我已经制作了一个控制器来从服务中获取数据。代码在这里：

 $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，你想要注入你的角度指令，这将生成d3图表。

这样做是这样的：

<svg linear-chart></svg>

此处线性图表将触发该指令。所以让我们看一个指令：

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功能中的按钮，嘲笑您的网络工程代码。

希望这有帮助！：）

如何将d3 force指令图转换为与angularjs一起使用？

1 个答案: