d3 Bubble Chart positioning and text in side bubbles

Question

I took this example and modified as per my requirement and successfully done, I have two problems and need help

1. The bubbles in google chrome and Edge was not showing properly however in Internet explorer it is showing properly as showing in below image.

Below picture shows how it is rendered in Internet Explorer

but it is not rendering in Chrome and Edge properly

with below style it is showing properly in Internet Explorer

.svg-containervis {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 30%;
    overflow: hidden;
}

2. I want to show some text on bubbles for example "ABC".

for text I am following This example, I want append "g" and then append "text" tags in below code but I need help to acheive this

BubbleChart.prototype.create_vis = function() {
  var that;
  this.vis = d3.select("#vis").append("svg").attr("preserveAspectRatio", "xMidYMid meet").attr("viewBox", this.viewBox).classed("svg-content", true).attr("id", "svg_vis");
  this.circles = this.vis.selectAll("circle").data(this.nodes, function(d) {
    return d.id;
  });

  that = this;

  //I want to append "g" and then circle and text below

  this.circles.enter().append("circle").attr("r", 0).attr("fill", (function(_this) {
     return function(d) {
        return _this.fill_color(d.group);
     };
  })(this))
   .attr("stroke-width", 2)
   .attr("stroke", (function(_this) {
       return function(d) {
      return d3.rgb(_this.fill_color(d.group)).darker();
     };
  })(this))
     .attr("id", function(d) {
       return "bubble_" + d.id;
  })
  .on("click", function(d, i) {
      return that.show_Project_details(d, i, this);
   })
  .on("mouseover", function(d, i) {
      return that.show_details(d, i, this);
  })
  .on("mouseout", function(d, i) {
      return that.hide_details(d, i, this);
  });


  return this.circles.transition().duration(2000).attr("r", function(d) {
    return d.radius;
 });
};

I created a Fiddle to view and help.

Thanks

EDIT as Per Sujeet Sinha Suggestion

I changed the text to "A" in order to see the placement of text, please see text are not appearing inside bubbles, I hope we are very near to solve this problem, please help me on this, see the new image I change the below code

node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.attr("x", function(d) { return d.x;})
.attr("y", function(d) { return d.y;})
.text(function(d) { return "A" });

Answer 1

Check this fiddle .

Basically, you want to apply the following change:

.svg-content {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0; 
  margin-top: 5%; //this is the change
  overflow: visible; //this is the change
}

EDIT: I've updated the fiddle to display the text as well now. You need to set the styling and animation as per your requirement. To see the changes made, carefully check the create_vis() at line 98. Also, you should play with the text co-ordinates at line 138 and 139.