How do I arrange all bubbles in circular manner in bubble chart with force layout?

Question

I want to combine the best features of pack layout and force layout into my chart. I am looking forward to get the packing/wrapping of bubbles into a circular group using pack layout and getting the drag/drop/collision/gravity features from the force layout. The packing/wrapping circle's radius shouldnt be static.

I have pack layout implemented here and force layout implemented here.

My idea right now is to use the above fiddle code for force layout and append a circle after SVG is appended to the body and then add the bubbles inside it.

However, while doing this, I am getting an error:

Uncaught TypeError: Cannot read property 'each' of undefined // line # 91 in JS

Basically, I would like the group of bubbles arranged in circular manner. How do I achieve this?

jsFiddle

JS:

var data = {
    name: "layout",
    children: [
        {name: "AxisLayout", size: 6725},
        {name: "BundledEdgeRouter", size: 3727},
        {name: "CircleLayout", size: 9317},
        {name: "CirclePackingLayout", "size": 12003},
        {name: "DendrogramLayout", "size": 4853},
        {name: "ForceDirectedLayout", "size": 8411},
        {name: "IcicleTreeLayout", "size": 4864},
        {name: "IndentedTreeLayout", "size": 3174},
        {name: "Layout", "size": 7881},
        {name: "NodeLinkTreeLayout", "size": 12870},
        {name: "PieLayout", "size": 2728},
        {name: "RadialTreeLayout", "size": 12348},
        {name: "RandomLayout", "size": 870},
        {name: "StackedAreaLayout", "size": 9121},
        {name: "TreeMapLayout", "size": 9191}
    ]
};

var margin = {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
},
width = 400 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var n = data.children.length,
    m = 1,
    padding = 6,
    radius = d3.scale.sqrt().range([0, 12]),
    color = d3.scale.category10().domain(d3.range(m)),
    x = d3.scale.ordinal().domain(d3.range(m)).rangePoints([0, width], 1);

var nodes = d3.range(n).map(function () {
    var i = Math.floor(Math.random() * m), //color
        v = (i + 1) / m * -Math.log(Math.random()); //value
    return {
        radius: radius(v),
        color: color(i),
        cx: x(i),
        cy: height / 2,
    };

});

nodes.forEach(function(item, index){
    item.radius = 20;
});

console.dir(nodes);

var force = d3.layout.force()
    .nodes(nodes)
    .size([width, height])
    .gravity(0)
    .charge(0)
    .on("tick", tick)
    .start();

var svg = d3.select("body")
  .append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
  .append("circle")
    .attr("cx", diameter/2)
    .attr("cy", diameter/2)
    .attr("r", diameter/2)
    .attr("fill", "red")
    .attr("z-index", -1)
  .append("g")
    .attr("transform", "translate(2,2)");

var circle = svg.selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .attr("r", function (d) {
    return d.radius;
    })
    .style("fill", function (d,i) {
        return "green";
    })
    .attr("z-index", 1)
    .call(force.drag);

function tick(e) {
    circle.each(gravity(.2 * e.alpha))  // error here
        .each(collide(.5))
        .attr("cx", function (d) {
        return d.x;
    })
        .attr("cy", function (d) {
        return d.y;
    });
}

// Move nodes toward cluster focus.
function gravity(alpha) {
    return function (d) {
        d.y += (d.cy - d.y) * alpha;
        d.x += (d.cx - d.x) * alpha;
    };
}

// Resolve collisions between nodes.
function collide(alpha) {
    var quadtree = d3.geom.quadtree(nodes);
    return function (d) {
        var r = d.radius + radius.domain()[1] + padding,
            nx1 = d.x - r,
            nx2 = d.x + r,
            ny1 = d.y - r,
            ny2 = d.y + r;
        quadtree.visit(function (quad, x1, y1, x2, y2) {
            if (quad.point && (quad.point !== d)) {
                var x = d.x - quad.point.x,
                    y = d.y - quad.point.y,
                    l = Math.sqrt(x * x + y * y),
                    r = d.radius + quad.point.radius + (d.color !== quad.point.color) * padding;
                if (l < r) {
                    l = (l - r) / l * alpha;
                    d.x -= x *= l;
                    d.y -= y *= l;
                    quad.point.x += x;
                    quad.point.y += y;
                }
            }
            return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
        });
    };
}

How do I arrange all bubbles in circular manner in bubble chart with force layout?

Answers (1)

Related Questions