d3.js - 将 D3 v3 强制有向图转换为 D3 v4 库实现时遇到问题？-6ren

d3.js - 将 D3 v3 强制有向图转换为 D3 v4 库实现时遇到问题？

转载作者：行者123 更新时间：2023-12-04 18:32:30

我最近使用 v3 库创建了我的第一个强制有向图，但是现在我需要使用 D3 版本 4 库创建相同的图，但是 v4 中的方法发生了巨大变化，现在我完全出错了()/drag() 方法 3 现在在 v4 中不存在。

我的图表基于以下模型 - http://www.ourd3js.com/wordpress/?p=606

是否有在 d3 的 v4 库中创建的示例存储库，我可以在某个地方查看并学习一些可以替换此特定图表的功能？

编辑:

我当前的代码看起来像这样，但我无法完全转换它，例如，有时节点链接非常接近，链接和节点的文本重叠。

<svg width="960" height="600"></svg>

Javascript代码 :

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var graph = root;

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

var width = x;
var height = y;
var img_w = 24;
var img_h = 24;
var k = Math.sqrt(root.nodes.length / (width * height));

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

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

    var node = svg.append("g")
                    .attr("class", "nodes")
                    .selectAll("circle")
                    .data(graph.nodes)
                    .enter().append("image")
                            .attr("width",img_w)
                            .attr("height",img_h)
                            .attr("xlink:href",function(d){
                                return d.image;
                            })
                            .call(d3.drag()
                    .on("start", dragstarted)
                    .on("drag", dragged)
                    .on("end", dragended));

    var links_text = svg.selectAll(".linetext")
                        .data(graph.links)
                        .enter()
                        .append("text")
                        .attr("class","linetext slds-text-heading--small")
                        .attr("text-anchor", "middle")
                        .text(function(d){
                            return '['+d.relation+']';
                        });

    var nodes_text = svg.selectAll(".nodetext")
                        .data(graph.nodes)
                        .enter()
                        .append("text")
                        .attr("class","nodetext slds-text-heading--label")
                        .attr("text-anchor", "middle")
                        .attr("dx",-20)
                        .attr("dy",20)
                        .text(function(d){
                            return (d.subname!=''?(d.subname+': '):'')+d.name;
                        });

  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

  simulation.force("link")
            .links(graph.links);

  function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    links_text
        .attr("x",function(d){ return (d.source.x + d.target.x) / 2; })
        .attr("y",function(d){ return (d.source.y + d.target.y) / 2; });

    node
        .attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; });

    nodes_text
        .attr("x",function(d){ return d.x + 20 })
        .attr("y",function(d){ return d.y + img_w/2; });
  }


function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

JSON 数据字符串:

  var root = {
  "nodes" : [ {
    "subname" : "",
    "name" : "Telco Power Case",
    "image" : "/node32.png",
    "id" : 0
  }, {
    "subname" : "Contact",
    "name" : "Suman Kumar",
    "image" : "/subnode32.png.png",
    "id" : 1
  }, {
    "subname" : "Contact",
    "name" : "Karla Samuel",
    "image" : "/subnode32.png.png",
    "id" : 2
  }, {
    "subname" : "Account",
    "name" : "Signa Tech",
    "image" : "/subnode32.png.png",
    "id" : 3
  }, {
    "subname" : "",
    "name" : "Maven's Case",
    "image" : "/node32.png",
    "id" : 4
  }, {
    "subname" : "",
    "name" : "Delta Case",
    "image" : "/node32.png",
    "id" : 5
  }, {
    "subname" : "Contact",
    "name" : "T Browney",
    "image" : "/subnode32.png.png",
    "id" : 6
  }, {
    "subname" : "Account",
    "name" : "Presto",
    "image" : "/subnode32.png.png",
    "id" : 7
  }, {
    "subname" : "Contact",
    "name" : "Bob Tannenbaum",
    "image" : "/subnode32.png.png",
    "id" : 8
  }, {
    "subname" : "Account",
    "name" : "Tesla Power",
    "image" : "/subnode32.png.png",
    "id" : 9
  } ],
  "links" : [ {
    "target" : 1,
    "source" : 0,
    "relation" : "Trainee"
  }, {
    "target" : 2,
    "source" : 0,
    "relation" : "Manager"
  }, {
    "target" : 3,
    "source" : 0,
    "relation" : "Technology"
  }, {
    "target" : 1,
    "source" : 0,
    "relation" : "Trainee"
  }, {
    "target" : 2,
    "source" : 0,
    "relation" : "Manager"
  }, {
    "target" : 3,
    "source" : 0,
    "relation" : "Technology"
  }, {
    "target" : 2,
    "source" : 4,
    "relation" : "Expert"
  }, {
    "target" : 2,
    "source" : 5,
    "relation" : "Expert"
  }, {
    "target" : 1,
    "source" : 5,
    "relation" : "Expert"
  }, {
    "target" : 6,
    "source" : 5,
    "relation" : "Trainee"
  }, {
    "target" : 7,
    "source" : 5,
    "relation" : "Technology;New Firm"
  }, {
    "target" : 8,
    "source" : 4,
    "relation" : "Expert"
  }, {
    "target" : 9,
    "source" : 4,
    "relation" : "New Firm"
  }, {
    "target" : 8,
    "source" : 4,
    "relation" : "Expert"
  }, {
    "target" : 9,
    "source" : 4,
    "relation" : "New Firm"
  }, {
    "target" : 6,
    "source" : 5,
    "relation" : "Trainee"
  }, {
    "target" : 7,
    "source" : 5,
    "relation" : "Technology;New Firm"
  } ]
};

最佳答案

你一下子问了一连串的问题，所以让我们对这个问题有点理智。

首先，linkDistance 现在是 distance在 d3.forceLink 上，因此在您的代码中:

.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(200))

其次，要使图像居中，请在设置 x 位置时执行此操作:

node
  .attr("x", function(d) {
    return (d.x - img_w /2);
  });

第三，要进行边界检测，您需要自己实现。例如，修复节点位置将是(建立在最后一个代码片段上):

node
  .attr("x", function(d) {
    var xPos = (d.x - img_w /2);
    if (xPos < 0) return 0;
    if (xPos > (960 - img_w)) return (960 - img_w);
    return xPos;
  })
  .attr("y", function(d) {
    var yPos = d.y;
    if (yPos < 0) return 0;
    if (yPos > (600 - img_h)) return (600 - img_h);
    return yPos;
  });

现在将相同的方法应用于链接...

这是我开始实现一些修复的一些示例代码:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .links line {
      stroke: #aaa;
    }
    
    .nodes circle {
      pointer-events: all;
      stroke: none;
      stroke-width: 40px;
    }
  </style>
</head>

<body>
  <svg width="960" height="600"></svg>
  <script>
    var root = {
      "nodes": [{
        "subname": "",
        "name": "Telco Power Case",
        "image": "http://lorempixel.com/24/24/",
        "id": 0
      }, {
        "subname": "Contact",
        "name": "Suman Kumar",
        "image": "http://lorempixel.com/24/24/",
        "id": 1
      }, {
        "subname": "Contact",
        "name": "Karla Samuel",
        "image": "http://lorempixel.com/24/24/",
        "id": 2
      }, {
        "subname": "Account",
        "name": "Signa Tech",
        "image": "http://lorempixel.com/24/24/",
        "id": 3
      }, {
        "subname": "",
        "name": "Maven's Case",
        "image": "http://lorempixel.com/24/24/",
        "id": 4
      }, {
        "subname": "",
        "name": "Delta Case",
        "image": "http://lorempixel.com/24/24/",
        "id": 5
      }, {
        "subname": "Contact",
        "name": "T Browney",
        "image": "http://lorempixel.com/24/24/",
        "id": 6
      }, {
        "subname": "Account",
        "name": "Presto",
        "image": "http://lorempixel.com/24/24/",
        "id": 7
      }, {
        "subname": "Contact",
        "name": "Bob Tannenbaum",
        "image": "http://lorempixel.com/24/24/",
        "id": 8
      }, {
        "subname": "Account",
        "name": "Tesla Power",
        "image": "http://lorempixel.com/24/24/",
        "id": 9
      }],
      "links": [{
        "target": 1,
        "source": 0,
        "relation": "Trainee"
      }, {
        "target": 2,
        "source": 0,
        "relation": "Manager"
      }, {
        "target": 3,
        "source": 0,
        "relation": "Technology"
      }, {
        "target": 1,
        "source": 0,
        "relation": "Trainee"
      }, {
        "target": 2,
        "source": 0,
        "relation": "Manager"
      }, {
        "target": 3,
        "source": 0,
        "relation": "Technology"
      }, {
        "target": 2,
        "source": 4,
        "relation": "Expert"
      }, {
        "target": 2,
        "source": 5,
        "relation": "Expert"
      }, {
        "target": 1,
        "source": 5,
        "relation": "Expert"
      }, {
        "target": 6,
        "source": 5,
        "relation": "Trainee"
      }, {
        "target": 7,
        "source": 5,
        "relation": "Technology;New Firm"
      }, {
        "target": 8,
        "source": 4,
        "relation": "Expert"
      }, {
        "target": 9,
        "source": 4,
        "relation": "New Firm"
      }, {
        "target": 8,
        "source": 4,
        "relation": "Expert"
      }, {
        "target": 9,
        "source": 4,
        "relation": "New Firm"
      }, {
        "target": 6,
        "source": 5,
        "relation": "Trainee"
      }, {
        "target": 7,
        "source": 5,
        "relation": "Technology;New Firm"
      }]
    };

    var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");

    var graph = root;

    var w = window,
      d = document,
      e = d.documentElement,
      g = d.getElementsByTagName('body')[0],
      x = w.innerWidth || e.clientWidth || g.clientWidth,
      y = w.innerHeight || e.clientHeight || g.clientHeight;

    var realWidth = width;
    var width = x;
    var height = y;
    var img_w = 24;
    var img_h = 24;
    var k = Math.sqrt(root.nodes.length / (width * height));

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

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

    var node = svg.append("g")
      .attr("class", "nodes")
      .selectAll("circle")
      .data(graph.nodes)
      .enter().append("image")
      .attr("width", img_w)
      .attr("height", img_h)
      .attr("xlink:href", function(d) {
        return d.image;
      })
      .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

    var links_text = svg.selectAll(".linetext")
      .data(graph.links)
      .enter()
      .append("text")
      .attr("class", "linetext slds-text-heading--small")
      .attr("text-anchor", "middle")
      .text(function(d) {
        return '[' + d.relation + ']';
      });

    var nodes_text = svg.selectAll(".nodetext")
      .data(graph.nodes)
      .enter()
      .append("text")
      .attr("class", "nodetext slds-text-heading--label")
      .attr("text-anchor", "middle")
      .attr("dx", -20)
      .attr("dy", 20)
      .text(function(d) {
        return (d.subname != '' ? (d.subname + ': ') : '') + d.name;
      });

    simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

    simulation.force("link")
      .links(graph.links);

    function ticked() {
      link
        .attr("x1", function(d) {
          var xPos = d.source.x;
          if (xPos < 0) return 0;
          if (xPos > (960 - img_w)) return (960 - img_w);
          return xPos;
        })
        .attr("y1", function(d) {
          var yPos = d.source.y;
          if (yPos < 0) return 0;
          if (yPos > (600 - img_h)) return (600 - img_h);
          return yPos;
        })
        .attr("x2", function(d) {
          var xPos = d.target.x;
          if (xPos < 0) return 0;
          if (xPos > (960 - img_w)) return (960 - img_w);
          return xPos;
        })
        .attr("y2", function(d) {
          var yPos = d.target.y;
          if (yPos < 0) return 0;
          if (yPos > (600 - img_h)) return (600 - img_h);
          return yPos;
        });

      links_text
        .attr("x", function(d) {
          var xPos = (d.source.x + d.target.x) / 2;
          if (xPos < 0) return 0;
          if (xPos > (960 - img_w)) return (960 - img_w);
          return xPos;
        })
        .attr("y", function(d) {
          var yPos = (d.source.y + d.target.y) / 2;
          if (yPos < 0) return 0;
          if (yPos > (600 - img_h)) return (600 - img_h);
          return yPos;
        });


      node
        .attr("x", function(d) {
          var xPos = (d.x - img_w /2);
          if (xPos < 0) return 0;
          if (xPos > (960 - img_w)) return (960 - img_w);
          return xPos;
        })
        .attr("y", function(d) {
          var yPos = d.y;
          if (yPos < 0) return 0;
          if (yPos > (600 - img_h)) return (600 - img_h);
          return yPos;
        });

      nodes_text
        .attr("x", function(d) {
          return d.x + 20
        })
        .attr("y", function(d) {
          return d.y + img_w / 2;
        });
    }


    function dragstarted(d) {
      if (!d3.event.active) simulation.alphaTarget(0.3).restart();
      d.fx = d.x;
      d.fy = d.y;
    }

    function dragged(d) {
      d.fx = d3.event.x;
      d.fy = d3.event.y;
    }

    function dragended(d) {
      if (!d3.event.active) simulation.alphaTarget(0);
      d.fx = null;
      d.fy = null;
    }
  </script>
</body>

</html>

关于d3.js - 将 D3 v3 强制有向图转换为 D3 v4 库实现时遇到问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38187076/

文章推荐： https - 阻止所有混合内容

文章推荐： sip - BYE 是逐跳吗？还是端到端？

文章推荐： .net - 如何使特定类型属于类型系列？

文章推荐： asp.net - npm 未包含在 ASP.NET Core Web 应用程序中

.htaccess - 强制 https，强制到子文件夹，强制 www，不要破坏站点
我一直很难编辑我的 .htaccess 文件来一起做这三件事。我已经能够分别获得每个部分，但我只是不明白逻辑流程如何使它们全部工作。这是我能够使用 bluehost support 上的演示进行整合
vba - 强制"is"以保存并另存为无宏工作簿
我制作的宏将模板工作簿保存为两个单独的文件。每个测试保存一个(位置 1、2、3 或 4)，然后在另一个宏中使用每个测试的数据。第二个是保留用于备份的原始数据文件。现在的问题是每次我在每个位置运行测试并
types - 包括模块、强制
我正在写一篇关于如何使用 OCaml 的模块系统而不是 Java 的 OO 系统(一个有趣的视角)的博客文章。我遇到了一些我不理解的关于强制的事情。下面是一个基本模块和两个包含它的模块: module
c - 强制 if 语句只执行一次
我有一段将被执行多次(5,000+)的代码，以及一个仅在第一次为真的 if 语句。我曾想过使用“FIRST”变量并每次都进行比较，但每次都检查它似乎是一种浪费，即使我知道它不需要。 bool FIRS
强制 P4CONFIG 未设置？
首先，我是 Perforce 的新手，我主要通过其文档进行学习。因此，我们即将从 CVS 迁移到 Perforce，我最近学到了一个避免更改每个工作区的 P4CLIENT 的好方法，即在工作区根目录
java - 强制 FileNotFoundException
我正在为一段代码编写测试，其中包含我试图涵盖的 IOException 捕获。 try/catch 看起来像这样: try { oos = new ObjectOutputStream(new
javascript - 强制 $.each() 循环等待动画完成后再继续
我正在尝试在新闻项目滚动之间添加延迟。我知道 $.each() 通过不等待动画完成来完成其工作，但我想知道如何制作它，以便一次向上滚动一个项目并等到最后一个动画完成后再继续在循环中。 $(functi
c# - 强制/要求方法的排序列表参数
假设已经编写了一个方法，需要一个排序列表作为其输入之一。当然这将在代码中进行注释和记录，param 将被命名为“sortedList”，但如果有人忘记，则会出现错误。有没有办法强制输入必须排序？我正
Apache 强制 SSL
我正在尝试将传入请求重定向到 https://www.domain.com/和所有 https://www.domain.com/ {所有页面}并且没有什么麻烦。我试过的方法: 添加此行:Redire
python - 强制 raw_input
我将如何实现以下内容: title_selection = raw_input("Please type in the number of your title and press Enter.\n%
javascript - 在浏览器中自动完成 ="off"强制
我有一个登录表单，我需要强制关闭自动完成功能。我试过了 jquery: $('#login').attr("autocomplete", "off"); HTML: Javascript:docume
Git 强制 merge
我想知道我应该怎么做才能强制从 dev 分支 merge 到我的 master 分支？使用“git merge dev”会导致很多冲突。但是，我不想单独处理它们。相反，我只是想使用我的 dev 分支中
c# - 强制 Nuget 包使用特定版本的子依赖项？
当安装 Hl7.Fhir.DSTU2 和 Hl7.Fhir.R4 这两个 Nuget 包时，我们得到如下信息: DSTU2 包似乎在使用 Hl7.Fhir.Support.Poco 版本 3.4.0
reactjs - 强制 react 功能组件触发重新渲染
我正在尝试让一个功能组件在 testFn 执行时强制重新渲染。我想使用状态来做到这一点(如果有更好的方法请说出来)，这似乎成功地强制重新渲染但只有两次，然后什么都没有。我构建了一个简单的演示来模拟这
g++ - 强制 g++ 为未使用的函数生成代码
默认情况下，g++ 似乎会省略未使用的类内定义方法的代码。示例 from my previous question : struct Foo { void bar() {} void baz(
html - 强制 div 高度以适应透视内容
我正在尝试使用 here 中介绍的技术使我的网站背景以比内容慢的速度滚动。我不希望背景固定，只希望更慢。这是 HTML 的样子: .parallax { perspective: 1px;
dart - 强制 ListView 缩小以包含子项
我能找到的最相似的问题是 'how to create a row of scrollable text boxes or widgets in flutter inside a ListView?'
javascript - 强制(修复)导入完全在一行中
我有以下 eslint 配置: "object-curly-newline": ["error", { "ImportDeclaration": "never",
tinymce - 强制 TinyMCE 去除数据属性
我正在使用 TinyMCE 插件并将 valid_elements 选项设置为: "a[href|target:_blank],strong/b,em/i,br,p,ul,ol,li" 即使没有列出数
强制 : wanted to Multiline description
您好，我想使用以下命令放置多行描述 p4 --field Description="MY CLN Header \\n my CLN complete description in two -thre

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

d3.js - 将 D3 v3 强制有向图转换为 D3 v4 库实现时遇到问题？