Как удалить внешний круг в диаграмме пузырьков D3

Question

Я пытаюсь избавиться от внешнего круга пузырьковой диаграммы. Но на самом деле теперь я нахожусь на своем умном конце ... Кажется, в Интернете есть несколько обучающих онлайн о том, как построить график пузырьков с использованием данных csv. Пожалуйста, проверьте мой рабочий 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; 
    }); 

Answer 1

Код отвечает за создание круга в вашем примере это (файл bubble.js, строки 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); 
    }); 

Все, что вам нужно сделать, это поставить линию

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

перед вызовом в append(), например:

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

и вы получите:

Объяснение решения заключается в том, что добавляется строка просто исключает любой круг, который не имеет родителя (который на самом деле только внешний круг) из рендеринг.

Модифицированный планшет here.

ПРИМЕЧАНИЕ. Текст в середине внешнего круга все еще отображается. Если вы этого не хотите, вы можете применять аналогичные решения для кода, как и для самого круга.