d3.js diagonal

基础概念

D3.js（Data-Driven Documents）是一个用于数据可视化的JavaScript库。它允许开发者使用数据来驱动DOM元素的操作，从而创建动态且交互性强的图表和图形。d3.js中的diagonal是一种特殊的路径生成器，主要用于创建树状图或层次结构图中的连接线。

类型与应用场景

类型

直线对角线：最简单的形式，用于连接两个点。
曲线对角线：使用贝塞尔曲线来平滑连接两个点，适用于需要更自然过渡的场景。

应用场景

树状图：在展示层次结构数据时，diagonal用于连接父节点和子节点。
组织结构图：用于显示公司或团队的层级关系。
流程图：在某些情况下，也可以用于表示流程中的步骤连接。

示例代码

以下是一个使用D3.js创建树状图并应用diagonal的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3.js Diagonal Example</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .node circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 3px;
        }
        .node text {
            font: 12px sans-serif;
        }
        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 2px;
        }
    </style>
</head>
<body>
<script>
    const treeData = {
        name: "Root",
        children: [
            { name: "Child 1" },
            { name: "Child 2" }
        ]
    };

    const width = 660;
    const height = 500;

    const tree = d3.tree().size([height, width]);

    const svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(40,0)");

    const root = d3.hierarchy(treeData);
    tree(root);

    const diagonal = d3.linkHorizontal()
        .x(d => d.y)
        .y(d => d.x);

    svg.selectAll(".link")
        .data(root.links())
        .enter().append("path")
        .attr("class", "link")
        .attr("d", diagonal);

    const nodes = svg.selectAll(".node")
        .data(root.descendants())
        .enter().append("g")
        .attr("class", "node")
        .attr("transform", d => `translate(${d.y},${d.x})`);

    nodes.append("circle")
        .attr("r", 10);

    nodes.append("text")
        .attr("dy", ".35em")
        .attr("x", d => d.children ? -13 : 13)
        .style("text-anchor", d => d.children ? "end" : "start")
        .text(d => d.data.name);
</script>
</body>
</html>