js 绘制有向图

在 JavaScript 中绘制有向图可以通过多种方式实现，常见的有以下几种：

基础概念：有向图是由顶点（节点）和有方向的边组成的图结构。

优势：

清晰直观地展示数据之间的关系和流向。
便于分析和理解复杂的网络结构。

类型：

基于邻接矩阵表示。
基于邻接表表示。

应用场景：

工作流程展示。
社交网络分析。
任务依赖关系呈现。

常见的实现方式之一是使用 D3.js 库：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>有向图示例</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    .node {
      fill: #69b3a2;
      stroke: #fff;
      stroke-width: 1.5px;
    }

    .link {
      fill: none;
      stroke: #999;
      stroke-opacity: 0.6;
    }
  </style>
</head>

<body>
  <svg width="600" height="400"></svg>

  <script>
    const svg = d3.select("svg");
    const width = +svg.attr("width");
    const height = +svg.attr("height");

    const nodes = [
      { id: "A" },
      { id: "B" },
      { id: "C" },
      { id: "D" }
    ];

    const links = [
      { source: "A", target: "B" },
      { source: "A", target: "C" },
      { source: "B", target: "D" },
      { source: "C", target: "D" }
    ];

    const simulation = d3.forceSimulation(nodes)
      .force("link", d3.forceLink(links).id(d => d.id))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2));

    const link = svg.append("g")
      .attr("class", "links")
      .selectAll("line")
      .data(links)
      .enter().append("line")
      .attr("class", "link");

    const node = svg.append("g")
      .attr("class", "nodes")
      .selectAll("circle")
      .data(nodes)
      .enter().append("circle")
      .attr("class", "node")
      .attr("r", 10);

    simulation.on("tick", () => {
      link
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y);

      node
        .attr("cx", d => d.x)
        .attr("cy", d => d.y);
    });
  </script>
</body>

</html>

可能出现的问题及原因：

节点或边显示不正确：可能是数据格式错误或者坐标计算有误。解决方法：检查节点和边的数据结构，确保坐标计算的逻辑正确。
图的布局混乱：可能是力的设置不合理。解决方法：调整 d3.forceSimulation 中力的参数，如电荷力、中心力等。
性能低下：节点和边数量过多。解决方法：优化算法，减少不必要的计算，或者对数据进行分组和简化展示。

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

有帮助

没帮助

d3.js中的分层图

我目前正在使用Graphviz来可视化控制流图。基本上，(可简化的)控制流图是一个DAG加上一些指向前一层中节点的边。后一条边不应影响节点放置。目前，dot绘制图形非常整洁，但它缺乏一种简单的方法来添加交互性(例如折叠、滚动、缩放)，这对于分析非常大的图形来说是无价的。因此，我选择d3.js作为最成熟和功能最丰富的图形库。我非常确定在d3.js中有一种简单的方法来绘制 (和dot一样)，但我似乎不认识它。我该怎么做？如果这有帮助，我已经在我的CFG上执行了主导者分析。

浏览 0提问于2012-07-05得票数 10

回答已采纳

2回答

Matlab:绘制有向图

、

它也可以是具有节点和标记边的有向图。有什么建议可以用一种不那么乏味的方式来做这件事吗？

浏览 0提问于2013-05-10得票数 1

1回答

用D3js创建数据库E-R图

、

我需要使用D3js为数据库模式创建E-R图。有什么例子，建议吗？如果有更适合这方面的库/实用程序(开源)，请进行编辑，因此建议。

浏览 17提问于2014-01-17得票数 20

1回答

D3:可以在节点之间添加多条(多于2条)边吗？

、

我正在构造一个D3力图来可视化网络流量。需要链接两个以上路径的节点。这有可能吗？感谢你的帮助。

浏览 1提问于2013-04-20得票数 2

回答已采纳

2回答

用有向图绘制叠加图

、

我想使用 JavaScript库绘制一个堆叠的图表，我在下面已经这样做了。但我想为每条条形线配不同的颜色。两种颜色，如黑色的条形顶部部分和同样浅色的底部部分，如下所示：请建议我如何通过一种不同的颜色为动态图。gray;<script src="//cdnjs.cloudflare.com/ajax/libs/mootools/1.4.5/mootools-core-full-compat.min.js"></

浏览 1提问于2016-12-07得票数 0

回答已采纳

2回答

绘制树木和图形的最佳技术是什么？

、、

为CS理论作业绘制图表和树的最简单、最清晰的方法是什么？

浏览 4提问于2012-12-01得票数 13

回答已采纳

3回答

用Python绘制有向图？

、、

我正试图为客户状态迁移制作有向图或Sankey图(任何有用的图)。数据如下所示，计数表示从当前状态迁移到下一个状态的用户数量。寻找一个可读的有向图。

浏览 5提问于2019-12-26得票数 7

回答已采纳

1回答

静态D3力-有向图性能

、、、

所以目前，我正试图创建一个力有向图，图中有几千个节点和大约30k个链接。你可能会猜到，模拟的速度非常慢。相反，我想要做的是预先计算节点的所有位置，只呈现一个静态(但却是交互式的)图形。有没有一种方法可以使用d3.js计算一个力有向图而不渲染它(使它更快)，然后根据预先计算的值绘制静态图？我的代码目前基于Mike的

浏览 3提问于2012-12-26得票数 4

2回答

用Python绘制有向图

、、

我有一个数据表，我想用有向图来显示它。："A","-""C","A""E","C""G","D,E" "H","F,G&

浏览 9提问于2022-11-04得票数 1

2回答

如何绘制简单有向图

、

我可以画出这样一个简单的有向力图：<head> <title>Force Layout Example 1</title>{ stroke-width: 2px;</head> <script src='http:/

浏览 4提问于2015-06-29得票数 2

回答已采纳

1回答

d3js强制有向图绘制节点，但不绘制链接

、

我得到了力有向图。它显示了没有问题的节点，并在控制台上写下了链接-- source和target。但不会将其连接到节点。

浏览 2提问于2017-03-24得票数 0

5回答

支持标记边的JS图库

、

我只需要绘制少于10个节点，所以性能不是一个大问题。所需特征：我找到了一个很好的，有很多libs有什么暗示吗？

浏览 17提问于2012-01-18得票数 5

回答已采纳

1回答

如何用R中的有向图形包绘制函数？

、

我有一个类似plot(t<-1:1000,log(t))的R情节，如何在R中用dygraph绘制函数？我尝试过dygraph(log(t))，但是“有向图”函数只接受xts对象(时间序列数据)，如何使用有向图函数绘制非时间序列数据？

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

回答已采纳

3回答

垂直绘制图形

我正在使用graphviz来绘制有向图。现在的问题是，虽然我能够正确地生成图形，但图形是水平设计的，这并不符合我的要求。那么，我如何才能垂直绘制有向图呢?请帮助我

浏览 3提问于2013-08-06得票数 30

1回答

如何用有向图绘制块？

、

与典型的时间序列线图不同，我需要像下面从图1到图2所示的那样绘制块。我让drawCallback计算每个点的画布坐标，如图所示。但我怎么画积木呢？我也需要隐藏原来的线条，虽然我可以画白色的，我想。我以前曾使用underlayCallback绘制背景块，但这些块必须位于前台。当y坐标发生变化时，我设置了循环来迭代和绘制块，但是这里没有CTX，就像在underlayCallbacks中一样。

浏览 6提问于2022-07-18得票数 2

回答已采纳

2回答

使用“有向图”绘制`预测‘预测

、、

我想用forecast绘制一个dygraphs包时间序列模型的预测。ldeaths", label = "Actual") %>%其结果是：图对象Jul Aug有没有人对如何基于dygrap

浏览 2提问于2017-04-26得票数 4

回答已采纳

2回答

在Linux上绘制有向图

、

我需要绘制(在PDF或光栅格式)一个有向无环图。顶点的数量很少(在几十个数量级)，我需要自定义一点边缘的样子。例如，我想要有“波纹”边缘，彩色边缘和标签的边缘。

浏览 1提问于2012-08-01得票数 1

回答已采纳

1回答

在Latex中绘制有向图

、

我想画一个箭头，从A指向图中的B，C，D..as。我如何在Latex中做到这一点。\begin{tikzpicture} child{node[circle,draw]{B}} child{node[circle,draw]{D}} child{node[circle,draw]{F}}\end{tikzpictur

浏览 1提问于2018-10-05得票数 1

1回答