D3.js - 固定某些节点坐标的力导向布局

最新推荐文章于 2024-08-15 09:14:52 发布

K先森~

最新推荐文章于 2024-08-15 09:14:52 发布

阅读量3.1k

点赞数 3

分类专栏：可视化文章标签：可视化 d3.js

本文链接：https://blog.csdn.net/willbkimps/article/details/103784271

版权

本文介绍了如何在D3.js的力导向布局中固定某些节点的坐标，使得这些节点的位置在布局过程中保持不变。通过设置节点的fx和fy属性，可以实现节点的固定，并在代码中展示了具体实现。

摘要由CSDN通过智能技术生成

在绘制节点链接图时，有时会存在这样的需求：我们需要固定某些节点的坐标，而其它节点遵循力导向布局，坐标位置不断变换，直到得到稳定的布局结果。

效果图如下图所示，红色节点是固定了坐标的节点，灰色节点没有固定坐标，在力导向布局过程中红色节点的坐标始终不会发生变化。
固定某些节点坐标的力导向布局
在线演示：https://codepen.io/yangkui/pen/YzPGjgP

在 D3.js 中，如果想要某个节点固定在一个位置，可以指定以下两个额外的属性:

fx - 节点的固定 x-位置

fy - 节点的固定 y-位置

每次 tick 结束后，节点的 node.x 会被重新设置为 node.fx 并且 node.vx 会被设置为 0；同理 node.y 会被重新替换为 node.fy 并且 node.vy 被设置为 0；如果想要某个节点解除固定，则将 node.fx 和 node.fy 设置为 null 或者删除这两个属性。

下面是使用D3.js V5版本的实现代码：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Force layout</title>
  <style>
    .link {
    
      stroke: #000;
      stroke-width: 1.5px;
    }
    .unfixedNode {
    
      cursor: move;
      fill: #ccc;
      stroke: #000;
      stroke-width: 1.5px;
    }
    .fixedNode {
    
      cursor: move;
      fill: red;
      stroke: #000;
      stroke-width: 1.5px;
    }
  </style>
</head>
<body>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
  	// fixed是固定坐标的节点，unfixed是没有固定坐标的节点。
    var graph ={
    
      "nodes": [
        {
    "id": 0, "category": "unfixed"},
        {
    "id": 1, "category": "ufixed"},
        {
    "id": 2, "category": "unfixed"},
        {
    "id": 3, "category": "fixed","x": 467, "y": 314},