D3 - 将 div 添加到 svg 已附加但未看到 AngularJs答案

【问题标题】：D3 - Adding div to svg is appended but not seen AnguarJsD3 - 将 div 添加到 svg 已附加但未看到 AngularJs
【发布时间】：2017-04-08 08:40:12
【问题描述】：

在下面的程序中，我通过 d3 向 svg 添加了一个 div。从 chrome 浏览器的 dom 结构中可以看出，它已正确附加。但是，我在网页中看不到背景或其可见性。

片段：

<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

【问题讨论】：

is it possible to append a div inside svg element的可能重复
那里的代码完全不同。而且，这不是附加而是可见性。
你看答案了吗？
检查这个小提琴：jsfiddle.net/hnk57o14 我试图用两种不同的方法重现你的问题。你强行附加了 div。但不使用foreignObject； svg 中的 div 对 svg 来说是.. 好吧.. 陌生
@Peterson html 元素应该插入到foreignObject 中，定义外物的宽度和高度，以便在 ui 上看到 div。像这样svg.append("foreignObject").attr("width", "20px").attr("height", "20px").append("xhtml:div")

标签： javascript angularjs html d3.js svg

【解决方案1】：

知道了。我需要添加这个：

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>

【讨论】：