我如何将旭日图转换为与 angularjs 一起使用的指令？

Question

我创建了一个 sunburst graph 正常 javascript。

现在我需要从服务获取数据并在 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));

        };
    };

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

Answer 1

首先你做一个这样的指令：

<svg sunburst-chart></svg>

第二

像这样为 ajax 制作模拟函数：

 function mockAnAjaxCall() {
    window.setTimeout(function() {
      $scope.data1 = {
        "name": "Root",
        "children": [{ ...
        }]
      };
        $scope.$apply();//apply the scope as data is changed.
    }, 3000); //ajax call gets over in 3 secs

第三

创建一个 link 函数来 watch data1 变量上的数据更改。

link: function(scope, elem, attrs) {
  //this will watch the scope data
  scope.$watch(
    "data1",//variable you are watching
    function handleChange(root, oldValue) {
                console.log(scope.data1)
      if (!root) {
        return;
      }
      //make the sun burst chart.

工作示例here

希望对您有所帮助！

我如何将旭日图转换为与 angularjs 一起使用的指令？

How can i convert sunburst graph as a Directive to use with angularjs?

javascript

angularjs

d3.js

sunburst-diagram