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

我创建了一个Fiddle来查看和帮助。

谢谢

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

标签： javascriptd3.jsbubble-chart

检查这个小提琴。

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

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

编辑：我现在也更新了小提琴以显示文本。您需要根据您的要求设置样式和动画。要查看所做的更改，请仔细检查第create_vis()98 行。此外，您应该使用第 138 行和第 139 行的文本坐标。

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

问题描述

解决方案

推荐阅读