javascript - 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

稍微更新了你的第一个 fiddle http://jsfiddle.net/09fsu0v4/1/

那么，让我们回顾一下您的问题:

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

   气泡图作为包布局的一部分依赖于数据结构 - 带有 children 数组的嵌套 JSON。每个节点可以是根节点(容器)或叶节点(代表某个最终值的节点)。而它的作用取决于“ child ”的值(value)存在。 ( 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)。简短示例在更新的 fiddle 中。

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

   父节点(容器)大小是所有子节点大小的总和。因此，如果您只有一个子节点，父节点将具有相同的大小。就您不能直接更改父节点大小而言 - 超大子节点的情况是不可能的。