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

【问题标题】：How can i convert sunburst graph as a Directive to use with angularjs?如何将旭日形图转换为与 angularjs 一起使用的指令？
【发布时间】：2016-04-23 05:08:52
【问题描述】：

我用普通的 javascript 创建了一个sunburst graph。

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

        };
    };

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

【问题讨论】：

标签： javascript angularjs d3.js sunburst-diagram

【解决方案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

第三

对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

希望这会有所帮助！

【讨论】：

你是 SO 领域的 D3 专家 :)