Javascript 使用D3.JS在同一个SVG上定位多组圆

半径不同的小圆组合成较大的圆

以下是我到目前为止的情况——一个圆圈：

为了画几个圆圈，我只在这里做“for”循环：，但这样我就有了几个SVG元素，这不是很好，因为我无法将它们像上面的图像那样放置（彼此更靠近）。而且我还需要一些更小的实心圆，再加上未来的放大/缩小功能

所以我的问题是：有没有一种方法可以在同一个SVG上有多组圆，并且只有很少的实心圆，并且能够放大/缩小

谢谢

---

Dmitry

最好将所有圆组和单个圆放在一个组元素中，而不是将它们作为单独的SVG。尝试如下所示

var rand=函数（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
};
可变宽度=400，
高度=400，
根={
“姓名”：“A”，
“大小”：12323，
“儿童”：[{
“名称”：“B”，
“尺寸”：3938
}, {
“姓名”：“C”，
“尺寸”：3812
}, {
“名称”：“D”，
“尺寸”：6714
}, {
“名称”：“E”，
“尺寸”：743
}, {
“名称”：“B1”，
“尺寸”：3938
}, {
“名称”：“C1”，
“尺寸”：3812
}, {
“名称”：“D1”，
“尺寸”：6714
}, {
“名称”：“E1”，
“尺寸”：743
}, {
“名称”：“B1”，
“尺寸”：3938
}, {
“名称”：“C1”，
“尺寸”：3812
}, {
“名称”：“D1”，
“尺寸”：6714
}, {
“名称”：“E1”，
“尺寸”：743
}, {
“名称”：“B1”，
“尺寸”：3938
}, {
“名称”：“C1”，
“尺寸”：3812
}, {
“名称”：“D1”，
“尺寸”：6714
}, {
“名称”：“E1”，
“尺寸”：743
}, {
“名称”：“B1”，
“尺寸”：3938
}, {
“名称”：“C1”，
“尺寸”：3812
}, {
“名称”：“D1”，
“尺寸”：6714
}, {
“名称”：“E1”，
“尺寸”：743
}, {
“名称”：“B1”，
“尺寸”：3938
}, {
“名称”：“C1”，
“尺寸”：3812
}, {
“名称”：“D1”，
“尺寸”：6714
}, {
“名称”：“E1”，
“尺寸”：743
}, {
“名称”：“B1”，
“尺寸”：3938
}, {
“名称”：“C1”，
“尺寸”：3812
}, {
“名称”：“D1”，
“尺寸”：6714
}, {
“名称”：“E1”，
“尺寸”：743
}, {
“名称”：“B1”，
“尺寸”：3938
}, {
“名称”：“C1”，
“尺寸”：3812
}, {
“名称”：“D1”，
“尺寸”：6714
}, {
“名称”：“E1”，
“尺寸”：743
}, {
“名称”：“B1”，
“尺寸”：3938
}, {
“名称”：“C1”，
“尺寸”：3812
}, {
“名称”：“D1”，
“尺寸”：6714
}, {
“名称”：“E1”，
“尺寸”：743
}, {
“名称”：“B1”，
“尺寸”：3938
}, {
“名称”：“C1”，
“尺寸”：3812
}, {
“名称”：“D1”，
“尺寸”：6714
}, {
“名称”：“E1”，
“尺寸”：743
}, {
“名称”：“B1”，
“尺寸”：3938
}, {
“名称”：“C1”，
“尺寸”：3812
},
]
};
var zoom=d3.behavior.zoom（）
.scaleExtent（[1,10]）
。打开（“缩放”，缩放）；
var color=d3.scale.category10（）；
var svg=d3.选择（“主容器”）.追加（“svg”）
.attr（“宽度”，宽度*3）
.attr（“高度”，高度*2）
.呼叫（缩放）；
var mainContainer=svg.append（“g”）；
函数缩放（）{
mainContainer.attr（“transform”、“translate”（+d3.event.translate+））比例（+d3.event.scale+））；
}
变量位置=[
[0, 0],
[宽度，0]，
[宽度*2,0]，
[宽度-200，高度]，
[宽度*2-200，高度]
];
函数addCircle（x，y）{
mainContainer.append（“圆”）
.样式（“填充”、“3D91B2”）
.attr（“cx”，x）
.attr（“cy”，y）
.attr（“r”，50）；
}
添加圆（宽度，高度-70）；
添加圆（宽*2，高-70）；
对于（变量i=0；i<5；i++）
（功能（）{
var-force=d3.layout.force（）
.连接距离（功能（d）{
返回100；
})//节点之间的链接距离
.charge（-200）//使节点相互排斥的电荷
.重力（0.1）
.尺寸（[宽度、高度]）
.在（“滴答”，滴答）上；
var gContainer=mainContainer.append（“g”）
.attr（“转换”、“转换”（“+positions[i][0]+”，“+positions[i][1]+”）；
var link=gContainer.selectAll（“.link”），
node=gContainer.selectAll（“.node”）；
//固定节点的位置，不允许它们移出屏幕
展平（根）；//设置ID
更新（i）；
函数更新（colorIdx）{
变量节点=展平（根），
links=d3.layout.tree（）.links（节点）；
//重新启动强制布局。
force.nodes（节点）
.链接（links）
.start（）；
//更新节点。
节点=节点。数据（节点，函数（d）{
返回d.id；
});
node.exit（）.remove（）；
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）；
//根据子节点调整节点大小
nodeEnter.append（“圆”）
.样式（“显示”，功能（d）{
返回d.儿童：“无”：；
})
.attr（“笔划”，“黑色”）
.attr（“r”，函数（d）{
var r=兰特（6,18）；
返回d.(U儿童？d.尺寸？14:18:d.儿童？24:r；
});
nodeEnter.append（“文本”）
.attr（“dy”，“.35em”）
.文本（功能（d）{
返回d.name；
}).样式（“显示”，功能（d）{
返回d.儿童：“无”：；
})
.样式（“字体大小”，功能（d）{
返回10；
});
节点。选择（“圆”）
.样式（“填充”，颜色（colorIdx））；
}
函数tick（）{
link.attr（“x1”，函数（d）{
返回d.source.x；
})
.attr（“y1”，函数（d）{
返回d.source.y；
})
.attr（“x2”，函数（d）{
(function () {
var rand = function (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};

var width = 400,
    height = 400,
    root = {
        "name": "A",
            "size": 12323,
            "children": [{
            "name": "B",
                "size": 3938
        }, {
            "name": "C",
                "size": 3812
        }, {
            "name": "D",
                "size": 6714
        }, {
            "name": "E",
                "size": 743
        }, {
            "name": "B1",
                "size": 3938
        }, {
            "name": "C1",
                "size": 3812
        }, {
            "name": "D1",
                "size": 6714
        }, {
            "name": "E1",
                "size": 743
        }, {
            "name": "B1",
                "size": 3938
        }, {
            "name": "C1",
                "size": 3812
        }, {
            "name": "D1",
                "size": 6714
        }, {
            "name": "E1",
                "size": 743
        }, {
            "name": "B1",
                "size": 3938
        }, {
            "name": "C1",
                "size": 3812
        }, {
            "name": "D1",
                "size": 6714
        }, {
            "name": "E1",
                "size": 743
        }, {
            "name": "B1",
                "size": 3938
        }, {
            "name": "C1",
                "size": 3812
        }, {
            "name": "D1",
                "size": 6714
        }, {
            "name": "E1",
                "size": 743
        }, {
            "name": "B1",
                "size": 3938
        }, {
            "name": "C1",
                "size": 3812
        }, {
            "name": "D1",
                "size": 6714
        }, {
            "name": "E1",
                "size": 743
        }, {
            "name": "B1",
                "size": 3938
        }, {
            "name": "C1",
                "size": 3812
        }, {
            "name": "D1",
                "size": 6714
        }, {
            "name": "E1",
                "size": 743
        }, {
            "name": "B1",
                "size": 3938
        }, {
            "name": "C1",
                "size": 3812
        }, {
            "name": "D1",
                "size": 6714
        }, {
            "name": "E1",
                "size": 743
        }, {
            "name": "B1",
                "size": 3938
        }, {
            "name": "C1",
                "size": 3812
        }, {
            "name": "D1",
                "size": 6714
        }, {
            "name": "E1",
                "size": 743
        }, {
            "name": "B1",
                "size": 3938
        }, {
            "name": "C1",
                "size": 3812
        }, {
            "name": "D1",
                "size": 6714
        }, {
            "name": "E1",
                "size": 743
        }, {
            "name": "B1",
                "size": 3938
        }, {
            "name": "C1",
                "size": 3812
        },

        ]
    };
var force = d3.layout.force()
    .linkDistance(function (d) {
    return 100;
}) // link distance between the nodes
.charge(-200) // charge that repel nodes from each other
.gravity(0.1)
    .size([width, height])
    .on("tick", tick);

var svg = d3.select("#main-container").append("svg")
    .attr("width", width)
    .attr("height", height);

var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");
//Fix the position of the nodes and doesnt allow them to move out of the screen
flatten(root); //to set ids

update();

function update() {
    var nodes = flatten(root),
        links = d3.layout.tree().links(nodes);
    // Restart the force layout.
    force.nodes(nodes)
        .links(links)
        .start();


    // Update nodes.
    node = node.data(nodes, function (d) {
        return d.id;
    });

    node.exit().remove();

    var nodeEnter = node.enter().append("g")
        .attr("class", "node");

    //Adjusting the node sizes according to the children
    nodeEnter.append("circle")
        .style("display", function (d) {
        return d.children ? "none" : "";
    })
        .attr("stroke", 'black')
        .attr("r", function (d) {
        var r = rand(6, 18);
        return d._children ? d.size ? 14 : 18 : d.children ? 24 : r;
    });

    nodeEnter.append("text")
        .attr("dy", ".35em")
        .text(function (d) {
        return d.name;
    }).style("display", function (d) {
        return d.children ? "none" : "";
    })
        .style("font-size", function (d) {
        return 10;
    });

    node.select("circle")
        .style("fill", color);
}

function tick() {
    link.attr("x1", function (d) {
        return d.source.x;
    })
        .attr("y1", function (d) {
        return d.source.y;
    })
        .attr("x2", function (d) {
        return d.target.x;
    })
        .attr("y2", function (d) {
        return d.target.y;
    });

    node.attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
}

function color(d) {
    return "#fd8d3c";
}


// Returns a list of all nodes under the root.
function flatten(root) {
    var nodes = [],
        i = 0;

    function recurse(node) {
        if (node.children) node.children.forEach(recurse);
        if (!node.id) node.id = ++i;
        nodes.push(node);
    }

    recurse(root);
    return nodes;
}

setInterval(function () {
    force.alpha(.1);
}, 100);
})();