在d3.js中创建形状正确的矩形树状图,可以按照以下步骤进行:
以下是一个示例代码:
// 导入d3.js库
<script src="https://d3js.org/d3.v7.min.js"></script>
// 创建SVG容器
const svg = d3.select("body")
.append("svg")
.attr("width", 800)
.attr("height", 600);
// 准备数据
const data = {
"name": "Root",
"children": [
{
"name": "Node 1",
"children": [
{"name": "Leaf 1"},
{"name": "Leaf 2"}
]
},
{
"name": "Node 2",
"children": [
{"name": "Leaf 3"},
{"name": "Leaf 4"}
]
}
]
};
// 创建树状图布局
const treeLayout = d3.tree()
.size([600, 400]);
// 创建节点和连线的数据结构
const root = d3.hierarchy(data);
const links = treeLayout(root).links();
const nodes = root.descendants();
// 创建连线的生成器
const linkGenerator = d3.linkHorizontal()
.x(d => d.y)
.y(d => d.x);
// 绘制连线
svg.selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", linkGenerator);
// 绘制节点
const node = svg.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.attr("transform", d => `translate(${d.y},${d.x})`);
node.append("rect")
.attr("width", 80)
.attr("height", 40)
.attr("x", -40)
.attr("y", -20);
node.append("text")
.text(d => d.data.name)
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle");
// 添加交互效果
node.on("mouseover", function() {
d3.select(this).select("rect").style("fill", "lightblue");
})
.on("mouseout", function() {
d3.select(this).select("rect").style("fill", "white");
});
这是一个简单的示例,你可以根据实际需求进行修改和扩展。关于d3.js的更多用法和详细说明,可以参考d3.js官方文档。
领取专属 10元无门槛券
手把手带您无忧上云