javascript - 如何在带有力布局的气泡图中以圆形方式排列所有气泡？

Question

我想将包布局和强制布局的最佳功能结合到我的图表中。我期待使用包布局将气泡打包/包裹成圆形组，并从力布局中获取拖/放/碰撞/重力功能。包装/包裹圆的半径不应是静态的。

我有pack layout implemented here和 force layout implemented here .

我现在的想法是使用上面的 fiddle 代码进行强制布局，并在将SVG附加到主体后附加一个圆圈，然后在其中添加气泡。

但是，在执行此操作时，我收到错误:

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

基本上，我想要以圆形方式排列的气泡组。我如何实现这一目标？

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;
        });
    };
}

Answer 1

两个错误:

• 直径未定义
• tick函数使用缓存的circle变量，这很好。但该函数是在变量初始化之前调用的，因此该函数还不知道它。