Monday, 6 January 2020

d3 Bubble Chart positioning and text in side bubbles

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 In Internet Explorer

but it is not rendering in Chrome and Edge properly enter image description here

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



from d3 Bubble Chart positioning and text in side bubbles

No comments:

Post a Comment