如何在角度动态附加自定义D3/SVG元素

我试图动态添加一个自定义元素，每当用户点击按钮，这将通过D3.js代码呈现SVG立方体。如何在角度动态附加自定义D3/SVG元素

我添加了一个ng-click指令给一个按钮元素，该按钮元素调用一个函数来动态追加一个自定义多维数据集元素，然后调用$ rootScope。$ apply（）以便'应用'自定义指令，但那不起作用。

下面是完整的代码：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>AngularJS, directives, and D3.js</title> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js"> 
    </script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 
</head> 

<body ng-app="myapp" ng-controller="MyController as svgc"> 
    <button ng-click="svgc.addCube()">Add a Cube</button><br/> 
    <cube></cube> 

    <script> 
    var myapp = angular.module('myapp', []); 
    myapp.controller("MyController", function($rootScope) { 
     var svgc = this; 

     svgc.addCube = function() { 
     //var cube = angular.element('cube'); 
      var cube = document.createElement('cube'); 
      document.body.appendChild(cube); 
      $rootScope.$apply(); 
     } 
    }); 

    myapp.directive('cube', function() { 
     function link(scope, el, attr) { 
     // d3.select(el[0]).append('svg'); 
     el = el[0]; 

     // CUSTOM CODE FOR RENDERING A CUBE 
     var width = 300, height = 300; 
     var points1 = "50,50 200,50 240,30 90,30"; 
     var points2 = "200,50 200,200 240,180 240,30"; 
     var fillColors = ["red", "yellow", "blue"]; 

     var svg = d3.select(el) 
        .append("svg") 
        .attr("width", width) 
        .attr("height", height); 

     // top face (parallelogram) 
     var polygon = svg.append("polygon") 
         .attr("points", points1) 
         .attr("fill", fillColors[1]) 
         .attr("stroke", "blue") 
         .attr("stroke-width", 1); 

     // front face (rectangle) 
     svg.append("rect") 
      .attr("x", 50) 
      .attr("y", 50) 
      .attr("width", 150) 
      .attr("height", 150) 
      .attr("fill", fillColors[0]); 

     // right face (parallelogram) 
     var polygon = svg.append("polygon") 
          .attr("points", points2) 
          .attr("fill", fillColors[2]) 
          .attr("stroke", "blue") 
          .attr("stroke-width", 1); 
     } 

     return { 
     link: link, 
     restrict: 'E' 
     } 
    }); 
    </script> 
</body> 
</html>

我已经看到了使用模板添加自定义元素上计算器的例子，但这种情况下，需要动态生成通过D3 SVG元素，所以我没有看到如何使用基于模板的解决方案。

我敢肯定，解决方法很简单......建议，欢迎:)

来源

2015-06-21 Oswald Campesato

我摆弄的代码，并用此溶液想出了：

<script> 
    var myapp = angular.module('myapp', []); 
    myapp.controller("MyController", function($compile, $scope) { 
     var svgc = this; 

     svgc.addCube = function() { 
      var cube = document.createElement('cube'); 
      cube.className = "cube"; 
      document.body.appendChild(cube); 
      $compile(angular.element('.cube'))($scope); 
     } 
    }); 
... 
</script>

来源

2015-06-21 06:11:07

如何在角度动态附加自定义D3/SVG元素

回答

相关问题