How to remove the outer circle in D3 bubble chart

Question

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

It seems that currently sth goes wrong with Plunker server. Could you please check out the link again later? Thank you! — Emily, Dec 16 '14 at 05:37

score 2 · Accepted Answer · answered Dec 17 '14 at 15:06

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.

How to remove the outer circle in D3 bubble chart

1 Answers1