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>

遇到的问题及解决方法

问题：对角线路径不正确或不符合预期。

原因：可能是由于数据结构不正确，或者diagonal的配置参数设置有误。 解决方法：

检查数据结构是否符合树状图的要求。
确保diagonal的x和y函数正确映射到数据的相应属性。
调试时可以在控制台打印出路径数据（d），查看其是否符合预期。

通过上述方法，通常可以解决大部分与d3.js diagonal相关的问题。

页面内容是否对你有帮助？

有帮助

没帮助

在d3 js中用对角线函数绘制两点之间的曲线

"y": 100}, { "x": 260, "y": 50} ]; .attr("d", <e

浏览 12提问于2016-01-01得票数 6

回答已采纳

1回答

d3.js树布局中的链接分离

、、、

我正在尝试做的是在d3.js树布局的链接之间留出一个间隙，节点名称与之匹配(见下图)。 .projection(function(d) { return [d.y, d.x / 180 * Math.PI];

浏览 1提问于2015-02-28得票数 0

1回答

js.Function2，怎么做？

、、、

为了学习，我尝试将一些d3.js应用程序移植到Scala.js。但现在我有点被困住了。联署材料： .projection(function(d) { return [d.y, d.x]; }); 如何将其转换为

浏览 1提问于2016-08-29得票数 1

回答已采纳

1回答

D3.js svg.diagonal发行

、、、

这是我的密码groupe.selectAll("path") .enter().append("path") .source({x:250, y:500}) .target({x:400, y:

浏览 2提问于2016-01-27得票数 0

回答已采纳

2回答

d3.js -根据子节点d.data.type将链接颜色更改为子节点

、、

我希望根据子节点的d.data.type将链接的颜色从父节点更改为子节点。注意:这应该只用于父级和子级之间的链接，而不是返回到祖先。因此，在下面的示例中，从A到A4的链接将是节点A4的笔划的颜色(紫色)。如果从父色升级到子色就更好了，但不是绝对必要的。 ? 节点笔划的颜色在d.data.type上设置，例如： .style("stroke", function(d) { if(d.data.type == "unit1

浏览 16提问于2021-07-10得票数 0

回答已采纳

1回答

d3.js树链接未显示

、

有人能帮我写这段代码吗！我找不到为什么节点之间的链接没有显示！自从我添加了In()和Out()函数后，树就不再是交互式的了！.node {} fill: steelblue; stroke-width: 1.5px; font: 10px sans-serif; fill: steelblue; stroke-width: 1.5px;div.toolti

浏览 0提问于2016-05-09得票数 0

1回答

、、、

我使用bottle和d3.js来显示一些数据。-- load the d3.js library --> duration = 750, .size([height, width]); var <em

浏览 1提问于2017-05-20得票数 0

1回答

如何根据节点名称设置节点链接颜色？

、

我已经根据节点名称设置了d3.js树中节点的颜色。现在我想根据节点名称设置节点链接颜色。 ? }) var o = {x: source.x0, y: source.y0}; return diagonal

浏览 25提问于2019-05-25得票数 1

回答已采纳

2回答

使用d3.js添加到我的节点的链接

我是testinf d3.js，我试图在根节点(JsFiddle中的中间节点)和子节点之间添加链接。我如何才能简单地做到这一点？var diagonal = d3.svg.diagonal.radial() return [d.y, d.x /tree.links(nodes)) .attr('class', '

浏览 5提问于2015-05-18得票数 0

1回答

聚类树状图d3.js中节点的不同高度

、、、、

我有一个关于d3.js的问题，我有一个基本的示例运行：和基本的json格式： "name": "root", {var height = 500; .size([height, width-200]); var diagonal= d3.svg.diagonal()

浏览 3提问于2016-07-01得票数 1

回答已采纳

1回答

带有json字符串的d3.js树不识别为Array

、、、、

我用d3.js来显示一棵树。下面我复制了在视图中使用d3.js显示树的代码： .size([height, width]); var diagonal= d3.svg.diagonal()

浏览 0提问于2015-09-20得票数 0

1回答

如果D3.js树形图的childs具有相同的值，则将它们连接起来

、、、

它是用D3.js库制作的。margin.top - margin.bottom; .size([height, width]); .projection(function(d) { return [d.y, d.x]; }); var svg = d3.select("body").appendlink.enter().insert("path",

浏览 0提问于2015-10-23得票数 1

点击加载更多