javascript - 如何去除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);
  });

你会得到:

解决方案的解释是，添加的线只是将任何没有父级的圆(实际上只是最外层的圆)从渲染中排除。

修改后的 plunk 是 here .

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