如何删除D3气泡图中的外圈

Question

我试图摆脱气泡图的外圈。但实际上现在我的机智已经结束......似乎很少在线教程如何使用csv数据绘制气泡图。请查看我的工作PLUNK并帮助我。

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。

注意：仍会显示外圈中间的文字。如果您不想要它，您可以应用类似于圆圈本身的代码解决方案。