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
from d3 Bubble Chart positioning and text in side bubbles
No comments:
Post a Comment