Javascript d3气泡图定位和侧气泡中的文本

我举了个例子，并根据我的要求进行了修改，成功地完成了，我有两个问题需要帮助

1。google chrome和Edge中的气泡未正确显示，但在Internet explorer中，气泡显示正确，如下图所示。

下图显示了它在Internet Explorer中的呈现方式

但它不能在Chrome和Edge中正确渲染

使用以下样式，它将在Internet Explorer中正确显示

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

2。我想在气泡上显示一些文本，例如“ABC”。

对于下面的示例中的文本，我希望在下面的代码中附加“g”，然后再附加“text”标记，但我需要帮助来实现这一点

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

我创建了一个视图和帮助

谢谢

根据Sujeet Sinha的建议进行编辑

我把文字改为“A”，以便看到文字的位置，请看文字里面没有出现气泡，我希望我们能很快解决这个问题，请帮我解决这个问题，看到新图片我修改了下面的代码

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" });

检查此项

基本上，您希望应用以下更改：

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

编辑：

---

我已经更新了以显示文本。您需要根据需要设置样式和动画。要查看所做的更改，请仔细检查第98行的

create_vis（）

。此外，您还应该使用第138行和第139行的文本坐标。

当您删除“padding bottom:30%”时，它是什么样子的从您的样式中？删除“填充底部：30%；”使所有气泡消失Hi Sujeet，其显示正确，你能帮我更新要求#2文本显示部分吗？因此我接受答案Hi Sujeet，你能按照你的建议将小提琴更新为气泡上的一些文本吗Hi Sujeet，请检查编辑，文本不显示在气泡内，我更新了这个问题image@AliAdnan，无法在气泡中获取文本的原因是因为行号87和88。每次调用x和y的值时，都会生成一个新的随机值。您需要做的是读取CSV并准备一个数据集，然后每个函数调用都应该从准备好的数据集中进行解析，而不是每次调用

random（）

。请检查函数create_nodes（）仅通过第66行调用，是否可以解释它是如何再次调用的？