在d3中,要连接两个不同圆形包装布局的节点,可以通过以下步骤实现:
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var pack = d3.pack()
.size([width, height])
.padding(1.5);
d3.json("data.json", function(error, data) {
if (error) throw error;
// 数据加载完成后执行以下代码
});
var root = d3.hierarchy(data)
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.value - a.value; });
// 对节点进行布局
var nodes = pack(root).descendants();
var node = svg.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
var line = d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });
svg.append("path")
.datum([{x: node1.x, y: node1.y}, {x: node2.x, y: node2.y}])
.attr("class", "link")
.attr("d", line);
通过以上步骤,可以在d3中连接两个不同圆形包装布局的节点。具体的实现方式可能会根据实际需求和数据结构的不同而有所变化。
领取专属 10元无门槛券
手把手带您无忧上云