D3 - svgにdivを追加すると追加されますが表示されませんAnguarJs

次のプログラムでは、divをsvgにd3で追加しています。クロムブラウザのDOM構造に見られるように、正しく付加されます。しかし、私はウェブページで背景やその可視性を見ることができません。D3 - svgにdivを追加すると追加されますが表示されませんAnguarJs

SNIPPET：

<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

これが見つかりました。私はこれを追加する必要：

完全なコード@balajisoundar

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>');

ありがとう：

//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 - svgにdivを追加すると追加されますが表示されませんAnguarJs

答えて

関連する問題