D3 - 将div添加到svg被附加，但没有看到AnguarJs

在以下程序中，我将dv添加到svg。正如在Chrome浏览器的dom结构中可以看到的那样。但是，我看不到网页中的背景或其可见性。D3 - 将div添加到svg被附加，但没有看到AnguarJs

片段：

<html> 

<head> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script> 

    <style> 
     svg{border:2px solid black;} 
     .red{width:50px;height:50px;background:red;} 
    </style> 

</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

    <svg></svg> 

    <script> 

     //module declaration 
     var app = angular.module('myApp',[]); 

     //Controller declaration 
     app.controller('myCtrl',function($scope){ 

      $scope.svgWidth = 500;//svg Width 
      $scope.svgHeight = 300;//svg Height 

      //resetting svg height and width in current svg 
      d3.select("svg").attr("width", $scope.svgWidth).attr("height", $scope.svgHeight); 

      //Setting up of our svg with proper calculations 
      var svg = d3.select("svg"); 

      //for x axis 
      svg.append("div").attr("class", "red"); 

     }); 

    </script> 

</body> 

</html>

结果：

DOM：

注：

我的DIV已经追加。它的情况只能看到。所以它不同于--->is it possible to append a div inside svg element

来源

2016-11-24 Deadpool

的[可能的复制是有可能追加内SVG一个div元素]（http://stackoverflow.com/questions/17595813/is-it-possible-to-append-a-div-inside-svg-element） – echonax

代码在这里完全不同。而且，这不是追加而是可见性。 – Deadpool

你读过答案了吗？ – echonax

明白了。我需要补充一点：

svg.append('foreignObject') 
    .attr('x', 40) 
    .attr('y', 100) 
    .attr('width', 180) 
    .attr('height', 100) 
    .append("xhtml:body") 
    .attr("id","words") 
    .html('<div style="width: 160px;"><p>Old text old text old text old text old text old text<p></div>');

感谢@balajisoundar

全码：

//module declaration 
 
var app = angular.module('myApp',[]); 
 

 
//Controller declaration 
 
app.controller('myCtrl',function($scope){ 
 

 
    $scope.svgWidth = 500;//svg Width 
 
    $scope.svgHeight = 300;//svg Height 
 

 
    //resetting svg height and width in current svg 
 
    d3.select("svg").attr("width", $scope.svgWidth).attr("height", $scope.svgHeight); 
 

 
    //Setting up of our svg with proper calculations 
 
    var svg = d3.select("svg"); 
 

 
    svg.append('foreignObject') 
 
    .attr('x', 40) 
 
    .attr('y', 100) 
 
    .attr('width', 180) 
 
    .attr('height', 100) 
 
    .append("xhtml:body") 
 
    .attr("id","words") 
 
    .html('<div style="width: 160px;"><p>Old text old text old text old text old text old text<p></div>'); 
 
});

svg{ 
 
    border:2px solid black; 
 
} 
 
.red{ 
 
    width:50px; 
 
    height:50px; 
 
    background:red; 
 
}

<html> 
 
<head> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script> 
 
</head> 
 
<body ng-app="myApp" ng-controller="myCtrl"> 
 
<svg></svg> 
 
</body> 
 
</html>

来源

2016-11-24 08:41:59 Deadpool

D3 - 将div添加到svg被附加，但没有看到AnguarJs

回答

相关问题