d3.js内部气泡图

Question

我正在制作一个需要看起来像这样的气泡图 - 它可能只有2个系列。

我主要担心的是 - 如果气泡大小相同或情况发生逆转。

我想过用这个jsfiddle作为基础..

http://jsfiddle.net/NYEaX/1450/

// generate data with calculated layout values
var nodes = bubble.nodes(data)
  .filter(function(d) {
     return !d.children;
  }); // filter out the outer bubble


var vis = svg.selectAll('circle')
  .data(nodes);

vis.enter()
  .insert("circle")
  .attr('transform', function(d) {
    return 'translate(' + d.x + ',' + d.y + ')';
  })
  .attr('r', function(d) {
    return d.r;
  })
  .style("fill", function(d) {
    return color(d.name);
  })
  .attr('class', function(d) {
    return d.className;
  });

vis
  .transition().duration(1000)

vis.exit()
  .remove();

Answer 1

如果您从this开始，可能会更容易。 您可以将较小的气泡设置为较大的气泡。

至于系列具有相同的尺寸时，我要么只有一个气泡，两个系列都有相同的颜色，或者我将两个气泡分开。当气泡需要相同的尺寸时，你真的无法做到。

Answer 2

稍微更新了您的第一个小提琴http://jsfiddle.net/09fsu0v4/1/

所以，让我们回答你的问题：

1. 需要看起来像这样的气泡图 - 它可能只有2个系列。

   作为包布局的一部分的气泡图依赖于数据结构 - 嵌套的JSON与children数组。每个节点可以是根节点（容器）或叶节点（表示某个结束值的节点）。它的作用取决于儿童和儿童。价值存在。 （https://github.com/d3/d3-3.x-api-reference/blob/master/Pack-Layout.md#nodes）

   所以，为了让你的图表看起来像图片只是重新安排json结构（或写儿童访问函数 - https://github.com/d3/d3-3.x-api-reference/blob/master/Pack-Layout.md#children）。简单的例子是更新的小提琴。

2. 如果气泡大小相同或情况相反

   父节点（容器）大小是所有子节点大小的总和。因此，如果您只有一个子节点，则父节点将具有相同的大小。 只要你不能直接改变父节点大小 - 超大的子节点的情况是不可能的。