如何将d3力指令图转换为使用angularjs？ [英] How can i convert d3 force directive graph to use with angularjs?

问题描述

我创建了一个D3力指令图与正常的javascript。

以下是 工作D3图表

strong>

现在我需要从服务获取数据并在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（）{} 
  

解决方案

你给我的代码对我来说有点重，但我会尝试用一些片段来说明你的情况：）

首先创建一个DOM，你要注入你的angular指令，这将使d3图表。

这样做：

 < svg linear-chart> ;< / svg> 
  

这里的线性图将触发指令。
所以让我们看一个指令：

  app.directive（'linearChart'，function（）{
 return {
限制：'EA'，
 
链接：function（scope，elem，attrs）{
 //所有用于强制布局的代码
} }）; 
 

下一个挑战是通过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; //将数据设置到范围对象中。 
 
}; 
}; 
  

现在，只要你的异步任务完成，范围数据被设置为。
我们知道范围数据内的值改变，所以我们需要有一个watch函数，它将触发 $ scope.data



这样的东西

  app.directive（'linearChart'，function （）{
 return {
 restrict：'EA'，
 
 link：function（scope，elem，attrs）{
 // this will watch the scope data 
 scope。$ watch（
data，function（）{/ *你的d3代码使forcelayout在scope.data更改时被触发
 * /}）。 .. 
  

这是一个小小提琴

注意：这里我通过按钮嘲笑你的webworker代码单击 loadData 函数。

希望这有助于！ ：）

I have created a D3 force directive graph with normal javascript.

Here is the working D3 graph

Now i need to get the data from a service and generate the graph in AngularJS. How can I make a directive out of this? Any example or guidance will be great.

I have made a controller to get the data from the service. And the code is here:

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

        };
    };

Is there a way I could get this data inside this function?

function loadImage() {}

解决方案

The code you have put is a little heavy for me to angularize but I ll try to illustrate your case with some snippets :)

First create a DOM where you want to inject your angular directive which will make the d3 chart.

That's done like this:

<svg linear-chart></svg>

Here linear-chart will trigger the directive. So lets see a directive:

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

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

Next challenge the data is pulled via async task done by 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.

        };
    };

So now whenever your async task completes the scope data is set to that. We know that the value inside the scope data changes so we need to have a watch function which will trigger the link function on change of the $scope.data

Something like this

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 :)
*/})...

Here is a small fiddle

Note: Here i am mocking your webworker code by a button click in the loadData function.

Hope this helps! :)

这篇关于如何将d3力指令图转换为使用angularjs？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！