Fatal编程技术网
  • angularjs/
  • Angularjs 如何在Angular中动态添加自定义D3/SVG元素

Angularjs 如何在Angular中动态添加自定义D3/SVG元素

angularjs svg d3.js

Angularjs 如何在Angular中动态添加自定义D3/SVG元素,angularjs,svg,d3.js,directive,Angularjs,Svg,D3.js,Directive,我试图在用户单击按钮时动态添加一个自定义元素，它将通过D3.js代码呈现SVG多维数据集 我向一个按钮元素添加了一个ng click指令，该元素调用一个函数来动态附加一个自定义多维数据集元素，然后我调用$rootScope.$apply（）来“应用”自定义指令，但这不起作用 以下是完整的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Angular

我试图在用户单击按钮时动态添加一个自定义元素，它将通过D3.js代码呈现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>


AngularJS、指令和D3.js
添加多维数据集

var myapp=angular.module（'myapp'，[]）；
控制器（“MyController”，函数（$rootScope）{
var svgc=此；
svgc.addCube=函数（）{
//var cube=angular.element（'cube'）；
var cube=document.createElement（'cube'）；
document.body.appendChild（多维数据集）；
$rootScope.$apply（）；
}   
}); 
myapp.directive（'cube'，function（）{
功能链接（范围、el、属性）{
//d3.选择（el[0]）.append（'svg'）；
el=el[0]；
//用于呈现多维数据集的自定义代码
变量宽度=300，高度=300；
var points1=“50,50 200,50 240,30 90,30”；
var points2=“200,50 200200 240180 240,30”；
变量fillColors=[“红色”、“黄色”、“蓝色”]；
var svg=d3.选择（el）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
//顶面（平行四边形）
var polygon=svg.append（“多边形”）
.attr（“点”，点1）
.attr（“填充”，填充颜色[1]）
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，1）；
//正面（矩形）
svg.append（“rect”）
.attr（“x”，50）
.attr（“y”，50）
.attr（“宽度”，150）
.attr（“高度”，150）
.attr（“填充”，填充颜色[0]）；
//右侧面（平行四边形）
var polygon=svg.append（“多边形”）
.attr（“点”，点2）
.attr（“填充”，填充颜色[2]）
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，1）；
}
返回{
链接：链接，
限制：“E”
}
});
我看过stackoverflow的例子，它们使用模板来添加自定义元素，但是这个场景需要通过D3动态生成SVG元素，所以我不知道基于模板的解决方案是如何工作的

我相信解决方案很简单…欢迎您提出建议：）

我修改了代码，并提出了以下解决方案：

  <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>


var myapp=angular.module（'myapp'，[]）；
controller（“MyController”，函数（$compile，$scope）{
var svgc=此；
svgc.addCube=函数（）{
var cube=document.createElement（'cube'）；
cube.className=“cube”；
document.body.appendChild（多维数据集）；
$compile（angular.element（'.cube'））（$scope）；
}   
}); 
...