javascript - D3 Canvas 强制布局 - 脱节组排斥另一组-6ren

javascript - D3 Canvas 强制布局 - 脱节组排斥另一组

转载作者：行者123 更新时间：2023-11-29 23:18:45

我有一组节点(A、B、C、D、E、F、G、H、I、J、K)，但在 2 个不相交的组(A、B、C)和( D、E、F、G、H、I、J、K):

<!DOCTYPE html>
<html>

<body onload="connect1();">
    <canvas width="300" height="100"></canvas>
    <!--button id="ref" onclick="refresh()">refresh </button-->
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
    
  var canvas = document.querySelector("canvas"),
      context = canvas.getContext("2d"),
      width = canvas.width,
      height = canvas.height;
    var links =[] , nodes = [] ;

    var graph={nodes,links}, wsConn;    

function connect1(){

    addNodeCanvas("A", "1");
    addNodeCanvas("B", "6");
    addNodeCanvas("C", "4");
    addNodeCanvas("D", "2");
    addNodeCanvas("E", "3");
	addNodeCanvas("F", "1");
    addNodeCanvas("G", "1");
    addNodeCanvas("H", "1");
    addNodeCanvas("I", "1");
    addNodeCanvas("J", "1");
    addNodeCanvas("K", "1");
	
    addLinkCanvas("A","B");
    addLinkCanvas("A","C");

	
    addLinkCanvas("E","D");
	addLinkCanvas("F","D");
	addLinkCanvas("G","D");
	addLinkCanvas("H","D");
	addLinkCanvas("I","D");
	addLinkCanvas("J","D");
	addLinkCanvas("K","D");

    refresh();
}


var nodeColors = d3.scaleOrdinal().range(d3.schemeCategory20);

function addNodeCanvas(nodeName,g) {
  var node = {
    x: 400,
    y: 400,
    id: nodeName,
    grp:g
  };
  var n = nodes.push(node);
}


function addLinkCanvas(idSrc, idTarget) {

    if (idSrc != idTarget) {
    var s = {},
      t = {};
    nodes.forEach(function(curNode) {
      if (typeof curNode.id != "undefined") {
        if (curNode.id == idSrc) {
          s = curNode;
        }
        if (curNode.id == idTarget) {
          t = curNode;
        }
      }
    });

    links.push({
      source: s,
      target: t
    });
  };

}




    function refresh() {

            var simulation = d3.forceSimulation()
            .force("link", d3.forceLink().id(function(d) { 
                return d.id; 
            }))
            .force("charge", d3.forceManyBody())
            .force("center", d3.forceCenter(width / 2, height / 2));

        simulation
            .nodes(nodes)
            .on("tick", ticked)
            .force("link")
            .links(links);
        d3.select(canvas)
            .call(d3.drag()
                .container(canvas)
                .subject(dragsubject)
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended));


        function ticked() {
            var margin = 20;
            nodes.forEach(function(d) {
                d.x = Math.max(margin, Math.min(width - margin, d.x))
                d.y = Math.max(margin, Math.min(height - margin, d.y))
            });

            function dblclick() {
                nodes.forEach(function(d) {
                    d.fx = d.fy = null;
                })
            };
            context.clearRect(0, 0, width, height);
            context.beginPath();
            links.forEach(drawLink);
            context.strokeStyle = "#aaa";
            context.stroke();
            context.beginPath();
            nodes.forEach(drawNode);

        }

        function dragsubject() {
            return simulation.find(d3.event.x, d3.event.y);
        }
        var clickDate = new Date();
        var difference_ms;

        function dragstarted() {
            
        }

        function dragged() {
           
        }


        function dragended() {
           
        }


        function drawLink(d) {
            context.moveTo(d.source.x, d.source.y);
            context.lineTo(d.target.x, d.target.y);
        }

        var nodeColors = d3.scaleOrdinal().range(d3.schemeCategory20),
            labelColors = d3.scaleOrdinal().range(['red', 'orange', 'blue', 'green', 'purple']);

        function drawNode(d) {
            context.beginPath();
            context.moveTo(d.x + 10, d.y);
            context.arc(d.x, d.y, 10, 0, 2 * Math.PI);
            context.strokeStyle = "#fff";
            context.stroke();
            context.fillStyle = nodeColors(d.grp);
            context.closePath();
            context.fill();
            context.beginPath();
            context.font = (d.labelSize ? d.labelSize : 10) + 'px Arial';
            context.fillStyle = labelColors(d.grp);
            context.fillText(d.id ? d.id : d.grp, d.x, d.y);
            context.closePath();
        }
    }
    </script>
</body>

</html>

由于这 2 组在加载页面后脱节，它们开始相互排斥并继续插入直到到达 Canvas 的末端。

如何避免这种情况，使两个组彼此远离但仍保持在 Canvas 中心附近。

Please try it running a few times, and you will see nodes A,B & C getting pushed to the end and remain there in a straight line.

最佳答案

问题在于，一旦施加初始排斥力，就没有其他力起作用来抵消它。因此，运动一直持续到 Canvas 容器的边界，节点撞到墙上(相当于 normal force 并带来平衡)。

要使无限排斥运动停止，你需要一个viscosity force这将逐渐减慢节点组，直到它们达到零速度。

d3 的强制布局为此提供了一个参数:velocityDecay :

var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function(d) { return d.id; }))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2))
  .velocityDecay(0.8); // the velocity decay setting

您可以使用 velocityDecay 的值，它可以介于 0 和 1 之间，其中 0 相当于不应用设置(无粘性)，1 相当于具有法向力并且没有运动开始。

例如粘度为 0.8:

<!DOCTYPE html>
<html>

<body onload="connect1();">
<canvas width="500" height="350"></canvas>
<!--button id="ref" onclick="refresh()">refresh </button-->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

  var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height;
  var links =[] , nodes = [] ;

  var graph={nodes,links}, wsConn;

  function connect1(){

    addNodeCanvas("A", "1");
    addNodeCanvas("B", "6");
    addNodeCanvas("C", "4");
    addNodeCanvas("D", "2");
    addNodeCanvas("E", "3");
    addNodeCanvas("F", "1");
    addNodeCanvas("G", "1");
    addNodeCanvas("H", "1");
    addNodeCanvas("I", "1");
    addNodeCanvas("J", "1");
    addNodeCanvas("K", "1");

    addLinkCanvas("A","B");
    addLinkCanvas("A","C");


    addLinkCanvas("E","D");
    addLinkCanvas("F","D");
    addLinkCanvas("G","D");
    addLinkCanvas("H","D");
    addLinkCanvas("I","D");
    addLinkCanvas("J","D");
    addLinkCanvas("K","D");

    refresh();
  }


  var nodeColors = d3.scaleOrdinal().range(d3.schemeCategory20);

  function addNodeCanvas(nodeName,g) {
    var node = {
      x: width / 2,
      y: height / 2,
      id: nodeName,
      grp:g
    };
    var n = nodes.push(node);
  }


  function addLinkCanvas(idSrc, idTarget) {

    if (idSrc != idTarget) {
      var s = {},
        t = {};
      nodes.forEach(function(curNode) {
        if (typeof curNode.id != "undefined") {
          if (curNode.id == idSrc) {
            s = curNode;
          }
          if (curNode.id == idTarget) {
            t = curNode;
          }
        }
      });

      links.push({
        source: s,
        target: t
      });
    };

  }




  function refresh() {

    var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) {
      return d.id;
    }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2))
    .velocityDecay(0.8);

    simulation
    .nodes(nodes)
    .on("tick", ticked)
    .force("link")
    .links(links);
    d3.select(canvas)
    .call(d3.drag()
    .container(canvas)
    .subject(dragsubject)
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));


    function ticked() {
      var margin = 20;
      nodes.forEach(function(d) {
        d.x = Math.max(margin, Math.min(width - margin, d.x))
        d.y = Math.max(margin, Math.min(height - margin, d.y))
      });

      function dblclick() {
        nodes.forEach(function(d) {
          d.fx = d.fy = null;
        })
      };
      context.clearRect(0, 0, width, height);
      context.beginPath();
      links.forEach(drawLink);
      context.strokeStyle = "#aaa";
      context.stroke();
      context.beginPath();
      nodes.forEach(drawNode);

    }

    function dragsubject() {
      return simulation.find(d3.event.x, d3.event.y);
    }
    var clickDate = new Date();
    var difference_ms;

    function dragstarted() {

    }

    function dragged() {

    }


    function dragended() {

    }


    function drawLink(d) {
      context.moveTo(d.source.x, d.source.y);
      context.lineTo(d.target.x, d.target.y);
    }

    var nodeColors = d3.scaleOrdinal().range(d3.schemeCategory20),
      labelColors = d3.scaleOrdinal().range(['red', 'orange', 'blue', 'green', 'purple']);

    function drawNode(d) {
      context.beginPath();
      context.moveTo(d.x + 10, d.y);
      context.arc(d.x, d.y, 10, 0, 2 * Math.PI);
      context.strokeStyle = "#fff";
      context.stroke();
      context.fillStyle = nodeColors(d.grp);
      context.closePath();
      context.fill();
      context.beginPath();
      context.font = (d.labelSize ? d.labelSize : 10) + 'px Arial';
      context.fillStyle = labelColors(d.grp);
      context.fillText(d.id ? d.id : d.grp, d.x, d.y);
      context.closePath();
    }
  }
</script>
</body>

</html>

关于javascript - D3 Canvas 强制布局 - 脱节组排斥另一组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51572203/

文章推荐： javascript - React Component 中状态定义的语法有本质区别吗？

文章推荐： mysql - 按两个值分组

文章推荐： javascript - 更新嵌套数组 react.js 中的状态

文章推荐： javascript - 连接来自 JavaScript XMLHttpRequest 的多个响应

android - sw320dp 布局 block xlarge 布局
我为 S3 做了一个额外的布局(所有布局的反叛)，人们说，使用 layout-sw320dp 对 s3 有好处。一切正常，s3 选择了这个文件夹，布局在 s3 上看起来很棒。但是当我尝试在 10"平
html - 未对齐的 CSS 布局 - 具有固定中心的 3 col 布局
我是 CSS 的新手，我正在尝试创建一个 3 列布局。也应该有一个居中的页脚。页面的总高度应该填满当前的屏幕。宽度似乎不对。目前，页脚在尺寸和位置上似乎都没有对齐。 I have attached
Java游戏-布局
已关闭。这个问题是 off-topic 。目前不接受答案。想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。已关闭10 年前。 Improve th
android确定设备是否为从右到左的语言/布局
有没有办法确定设备是从右到左的语言(比如阿拉伯语)而不是从左到右的语言(英语)？需要与旧 API 级别(低至 10)兼容的东西解决方案我最终在接受的答案中使用了 xml 方法。更进一步，我还添加
QT 布局 - 初始方向
我是 QT 的新手。我试图通过实现下面看到的这个小窗口来理解布局机制。它在作为主窗口的 QWidget 下具有以下元素: 一个延伸到所有客户区域的大型 QWidget。窗口顶部的两个 QWidget
Extjs Accordion 布局
Accordion 布局是堆叠面板布局，因为此时只有一个面板可见，但我想同时显示两个面板可见，所以我们可以使用 Accordion 面板来做到这一点吗？？最佳答案您不能扩展现有的 Accordio
sql - 简单的数据库表设计/布局
我只是想知道，作为一个假设示例，针对以下场景布局表格的最佳方式是什么: 假设我正在编写一个用于跟踪学生出勤的应用程序。每年年初，我都想添加所有学生(我将手动执行此操作 - 现在，是否应该为这里的每个学
SVN 布局——最佳实践
在 CVS 中，我们的项目中有多个目录。有一个夜间构建，它必须从同一个 CVS 项目的不同目录中提取东西才能构建夜间构建。所以我应该记住这一点，如果我们迁移到 SVN，我必须修改构建脚本以从不同的存
窗口上的 WPF 布局
我在 WPF Windows 上有几个列表框，带有 Height="Auto" Width="Auto"在表格上设置表单大小在不同分辨率下完美匹配，但问题是当我按下最大化按钮时，在表单调整大小时会看
WPF 布局，我可以清理它吗？
仅供引用，我是 WPF 的新手。我正在我的 WPF 应用程序中创建一个侧边栏并想要圆角。我学到的不是可以附加到网格的属性。另外，我尝试将文本块放在边框控件中，但我收到的错误消息说“ child 只能
codeigniter - 如何使用基本设计样式创建母版页(布局)
我是CodeIgniter的新手。我想使用包含菜单，页脚等的基本样式创建母版页或布局。我不想在所有页面中编写重复的内容并为所有页面自动加载。例如，我可以在asp.net中创建母版页，或者在asp.ne
一个窗口的 eclipse 布局
我正在使用它来调试应用程序。调试的时候发现底部显示了一个窗口中变量的值，如图- 但是，当我显示表达式时，我得到这样的布局 - 我的问题是，是否可以更改变量窗口的布局也可以在右侧显示值，因为这对我来说很
Magento XML 布局
上面的代码中，放置“as=”footer_links”是什么意思？最佳答案 as="x" 语法定义模板可用来调用 block 的名称。因此，对于以下内容: 在outer_block.p
c++ - RegGetValueA格式/布局
我试图编写一个检查注册表值的功能，以查看Windows上的控制台是否启用了颜色。 Computer\HKEY_CURRENT_USER\Console\VirtualTerminalLevel 如果您
动态添加区域到 Marionette 布局
我有一个布局，但无法提前定义其所有区域，因为它们是未知的。稍后创建了 ItemView，我想使用 View 的 ID 作为区域名称在布局中创建一个新区域，这样我就可以说: layout.dynami
以多列和行作为启动任务的 ConEmu 布局
我们有一个相当复杂的 gulp 构建过程，涉及多个模块，每个模块都有一个或两个 watch 。我想在一个仪表板中监控这一点，如下所示: 每一列都是一个模块，列内的每一行都是后续的构建步骤。一旦第 1
Java JFrame 布局
这就是问题所在，我有一个 MainWindow 类，它在一个设置例程中扩展了 JFrame，我将该类的布局设置为新的 CardLayout()。这一切都工作正常，但是当我从 JFrame 请求布局并将
Java JFrame 布局
我正在制作一个简单的迷宫程序，用户可以在其中创建墙壁、路径、起点和终点，单击“解决”，迷宫将被解决。为此，我有一个大小为 640x480 的 java JFrame。在 JFrame 的左侧，我有一个
一个窗口的 eclipse 布局
我正在使用它来调试应用程序。调试的时候发现底部显示了一个窗口中变量的值，如图- 但是，当我显示表达式时，我得到这样的布局 - 我的问题是，是否可以更改变量窗口的布局也可以在右侧显示值，因为这对我来说很
JavaFX VBox 布局
我已经编写了使用 VBox 作为布局的代码。我希望按钮出现在顶行，然后绘制 2 条水平线，在 400x400 场景中应位于 y=200 和 300 处。但输出显示了我给出的不同坐标处的线条。我知道这

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - D3 Canvas 强制布局 - 脱节组排斥另一组