D3 - Adding div to svg is appended but not seen AnguarJs

Question

In the following program, I am adding a div to svg, by d3. It is appended properly as can be seen in the dom structure of chrome browser. But, I cannot see the background or its visibility in the webpage.

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>

RESULT:

DOM:

NOTE:

My div is appended already. Its case of visibility only. So its different from ---> is it possible to append a div inside svg element

Possible duplicate of [is it possible to append a div inside svg element](http://stackoverflow.com/questions/17595813/is-it-possible-to-append-a-div-inside-svg-element) — eko, Nov 24 '16 at 06:52
Code is completely different there. And, this is not appending but visibility. — Deadpool, Nov 24 '16 at 06:53
Yes ---> My div is appended already <---- Its only case of visibility. — Deadpool, Nov 24 '16 at 06:54
Check this fiddle: https://jsfiddle.net/hnk57o14/ I tried to reproduce your problem with 2 different approaches. You forcefully appended the div. But without using a foreignObject; The div inside the svg will be.. well.. foreign to the svg — eko, Nov 24 '16 at 07:11
@Peterson html elements should be inserted into ```foreignObject```, define width and height for the foreign object to see div on the ui. something like this ```svg.append("foreignObject").attr("width", "20px").attr("height", "20px").append("xhtml:div")``` — balajisoundar, Nov 24 '16 at 07:16

score 0 · Accepted Answer · edited Nov 24 '16 at 09:01

Got It. I needed to add this:

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

Thanks @balajisoundar

Full Code:

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

D3 - Adding div to svg is appended but not seen AnguarJs

1 Answers1