CODEWITHSUNDEEP
javascriptsvgd3.jscircle-pack
Emily
Emily

Reputation: 45

How to remove the outer circle in D3 bubble chart

I am trying to get rid of the outer circle of the bubble chart. But actually now I am at my wit's end... It seems there is few tutorial online on how to plot bubble chart using csv Data. Please check out my working PLUNK and help me out.

PLUNK: http://plnkr.co/edit/87WLm3OmK1jRtcq8p96u?p=preview

d3.csv("count_s.csv", function(csvData) {
var years = [2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014];
pack.value(function(d) {
  return +d["count" + years[i]];
});

var data = {
  name: "city",
  children: csvData
};


var node = svg1.selectAll("g.node")
  .data(pack.nodes(data), function(d) {
    return d.city;
  });

Upvotes: 3

Views: 1399

Answers (1)

VividD
VividD

Reputation: 10536

The code responsible for circle creation in your example is this (file bubble.js, lines 63-70):

//Add the Circles
var circles = nodeEnter.append("circle")
  .attr("r", function(d) {
    return d.r;
  })
  .style("fill", function(d) {
    return color1(d.city);
  });

All you need to do is to put the line

  .filter(function(d){ return d.parent; })

before call to append(), like this:

//Add the Circles
var circles = nodeEnter
  .filter(function(d){ return d.parent; })
  .append("circle")
  .attr("r", function(d) {
    return d.r;
  })
  .style("fill", function(d) {
    return color1(d.city);
  });

and you will get:

enter image description here

The explanation of the solution is that added line simply excludes any circle that does not have a parent (which is actually only the outermost circle) from rendering.

Modified plunk is here.

NOTE: The text in the middle of the outer circle is still displayed. If you do not want it either, you may apply similar code solutions as the one used for the circle itself.

Upvotes: 2

Related Questions