javascript - 如何删除D3气泡图中的外圆

我试图摆脱泡沫图表的外圈。但实际上，现在我快要死了……似乎在线上几乎没有关于如何使用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;
  });

最佳答案

在您的示例中，负责创建圆的代码如下(文件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。

注意:仍然显示外圆中间的文本。如果您也不想这样做，则可以应用与圆本身相同的代码解决方案。

关于javascript - 如何删除D3气泡图中的外圆，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27497436/