javascript - D3 强制布局将链接更改为路径并将箭头放在节点边缘而不是中心-6ren

javascript - D3 强制布局将链接更改为路径并将箭头放在节点边缘而不是中心

转载作者：行者123 更新时间：2023-11-30 11:05:57

我目前正在尝试让我的 d3 节点链接结束在节点边缘而不是节点中心(矩形)。随着链接被绘制到中心，我在箭头放置方面遇到了问题。它们显然都混淆了，因为链接的长度和 Angular 不同。

我将如何继续将它们成功放置到节点边缘而不是中心？我也很好奇如何将我的链接更改为“弯曲”路径，我已经包含了“路径”变量，但它目前无法正常工作。

截至目前，这是代码的一部分:

var graphWrapper = jQuery("#outputContainerFlowchart").append("<svg id='graphWrapper'></svg>");
var svg = d3.select("#graphWrapper").attr("width", width).attr("height", height);

var simulation = d3.forceSimulation(graph.nodes)
    .force("charge", d3.forceManyBody().strength(-30000))
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("link", d3.forceLink(graph.links).id(function(d) {return d.id; }).distance(50).strength(1))
    .force("x", d3.forceX(width / 2).strength(1))
    .force("y", d3.forceY(height / 2).strength(1))
    .stop();

graph.nodes[0].fixed = true;
graph.nodes[0].fx = width / 2;
graph.nodes[0].fy = height / 2;

d3.timeout(function() {
   let rectWidth = 180;
   let rectHeight = 60;
   for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
         simulation.tick();
   }

   var g = svg.append("g")
       .attr("class", "everything");

   var arrow = g.append("defs").append("marker")
       .attr("id", "arrow")
       .attr("viewBox", "0 -5 10 10")
       .attr("refX", 80)
       .attr("refY", 0)
       .attr("markerWidth", 4)
       .attr("markerHeight", 4)
       .attr("orient", "auto")
       .append("svg:path")
       .attr("d", "M0,-5L10,0L0,5");


   var links = g.append("g")
       .attr("stroke", "#bbb")
       .attr("stroke-width", 3)
       .selectAll("line")
       .data(graph.links)
       .enter().append("line")
       .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; })
       .attr("marker-end", "url(#arrow)");


   var path = g.append("svg:g")
       .selectAll("line")
       .data(graph.links)
       .enter().append("svg:path")
       .attr("class", "link")
       .style("stroke-width", "10")
       .style("stroke", "red")
       .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; })
       .attr("marker-end", "url(#arrow)");


   var nodes = g.selectAll("foreignObject")
        .data(graph.nodes)
        .enter()
        .append("foreignObject")
        .attr("x", function(d) {
             return d.x - rectWidth / 2;
        })
        .attr("y", function(d) {
             return d.y - rectHeight / 2;
        })
        .attr("width", rectWidth)
        .attr("height", rectHeight)
        .attr("class", function(d) {
             return ("graphNode "+d.group)
        })
        .style("background-color", function(d) {
             return colors[d.group];
        })
        .append("xhtml:div")
             .classed("graphNodeDiv", true)
             .html(function(d) {
                  return d.id;
             })
});

我还创建了一个带有完整代码的 jsFiddle: https://jsfiddle.net/czdvjw8o/2/

最佳答案

SVG 包含 marker-mid 指令，用于将标记放置在路径和多段线的中点上，但不在线上，因为它不包含中点。

我已经将您的代码更改为:

var arrow = g.append("defs").append("marker")
    .attr("id", "arrow")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 0)    // here i was placed 0
    .attr("refY", 0)
    .attr("markerWidth", 4)
    .attr("markerHeight", 4)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");


 var links = g.append("g")
    .attr("stroke", "#bbb")
    .attr("stroke-width", 3)
    .selectAll("polyline") // selecting polylines instead of lines
    .data(graph.links)
    .enter().append("polyline") // adding polylines instead of lines
    .attr("points", function(d) { 
           return [
                d.source.x, d.source.y,
                // here i calculate midpoints where markers need to appear
                d.source.x/2+d.target.x/2, d.source.y/2+d.target.y/2,
                d.target.x, d.target.y
           ].join(','); 
    })
    .style("marker-mid", "url(#arrow)"); // here i changed type of marker

结果图像:

工作片段:

var width = jQuery("#outputContainerFlowchart").width();
                var height = jQuery("#outputContainerFlowchart").height();

                var colors = {
                                dummyprodVip: "#1eb543",
                                dummyaccVip: "#30cc30",
                                dummyprodLtmp: "#3be264",
                                dummyaccLtmp: "#74e874",
                                dummyprodPool: "#82ffa0",
                                dummyaccPool: "#bcffbc",
                                dummy2prodBVip: "#ff8438",
                                dummy2accAVip: "#becc6a",
                                dummy2prodBLtmp: "#ffac39",
                                dummy2accALtmp: "#d9e590",
                                dummy2prodBPool: "#ffdb3a",
                                dummy2accAPool: "#f6ffc1",
                }

                var graph = {
                  "nodes": [
                                {
                                  "id": "dummyvip1",
                                  "group": "dummyPrdVip"
                                },
                                {
                                  "id": "dummyltmp1",
                                  "group": "dummyPrdLtmp"
                                },
                                {
                                  "id": "dummypool1",
                                  "group": "dummyPrdPool"
                                },
                                {
                                  "id": "dummypool2",
                                  "group": "dummyPrdPool"
                                },
                                {
                                  "id": "dummy2vip1",
                                  "group": "dummy2PrdVip"
                                },
                                {
                                  "id": "dummy2vip2",
                                  "group": "dummy2PrdVip"
                                },
                                {
                                  "id": "dummy2ltmp1",
                                  "group": "dummy2PrdLtmp"
                                },
                                {
                                  "id": "dummy2ltmp2",
                                  "group": "dummy2PrdLtmp"
                                },
                                {
                                  "id": "dummy2pool1",
                                  "group": "dummy2PrdPool"
                                },
                                {
                                  "id": "dummy2pool2",
                                  "group": "dummy2PrdPool"
                                },
                                {
                                  "id": "dummy2pool3",
                                  "group": "dummy2PrdPool"
                                },
                                {
                                  "id": "dummy2pool4",
                                  "group": "dummy2PrdPool"
                                },
                                {
                                  "id": "dummy2pool5",
                                  "group": "dummy2PrdPool"
                                },
                                {
                                  "id": "dummy2pool6",
                                  "group": "dummy2PrdPool"
                                },
                                {
                                  "id": "dummy2pool7",
                                  "group": "dummy2PrdPool"
                                }
                  ],
                  "links": [
                                {
                                  "source": "dummyvip1",
                                  "target": "dummyltmp1",
                                  "value": 1
                                },
                                {
                                  "source": "dummyltmp1",
                                  "target": "dummypool1",
                                  "value": 6
                                },
                                {
                                  "source": "dummyltmp1",
                                  "target": "dummypool2",
                                  "value": 1
                                },
                                {
                                  "source": "dummypool1",
                                  "target": "dummy2vip1",
                                  "value": 1
                                },
                                {
                                  "source": "dummypool2",
                                  "target": "dummy2vip2",
                                  "value": 1
                                },
                                {
                                  "source": "dummy2vip1",
                                  "target": "dummy2ltmp1",
                                  "value": 1
                                },
                                {
                                  "source": "dummy2vip2",
                                  "target": "dummy2ltmp2",
                                  "value": 1
                                },
                                {
                                  "source": "dummy2ltmp1",
                                  "target": "dummy2pool1",
                                  "value": 1
                                },
                                {
                                  "source": "dummy2ltmp1",
                                  "target": "dummy2pool2",
                                  "value": 1
                                },
                                {
                                  "source": "dummy2ltmp1",
                                  "target": "dummy2pool3",
                                  "value": 1
                                },
                                {
                                  "source": "dummy2ltmp1",
                                  "target": "dummy2pool4",
                                  "value": 1
                                },
                                {
                                  "source": "dummy2ltmp1",
                                  "target": "dummy2pool5",
                                  "value": 1
                                },
                                {
                                  "source": "dummy2ltmp2",
                                  "target": "dummy2pool6",
                                  "value": 1
                                },
                                {
                                  "source": "dummy2ltmp2",
                                  "target": "dummy2pool7",
                                  "value": 1
                                }
                  ]
                };
						
                var graphWrapper = jQuery("#outputContainerFlowchart").append("<svg id='graphWrapper'></svg>");
                var svg = d3.select("#graphWrapper").attr("width", width).attr("height", height);
                var simulation = d3.forceSimulation(graph.nodes)
                                .force("charge", d3.forceManyBody().strength(-30000))
                                .force("center", d3.forceCenter(width / 2, height / 2))
                                .force("link", d3.forceLink(graph.links).id(function(d) {return d.id; }).distance(50).strength(1))
                                .force("x", d3.forceX(width / 2).strength(1))
                                .force("y", d3.forceY(height / 2).strength(1))
                                .stop();

                console.log(graph.nodes[0]);
                graph.nodes[0].fixed = true;
                graph.nodes[0].fx = width / 2;
                graph.nodes[0].fy = height / 2;
                d3.timeout(function() {
                        let rectWidth = 180;
                        let rectHeight = 60;
                        for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
                                simulation.tick();
                        }

                        var g = svg.append("g")
                                .attr("class", "everything");

                        var arrow = g.append("defs").append("marker")
                                .attr("id", "arrow")
                                .attr("viewBox", "0 -5 10 10")
                                .attr("refX", 0)
                                .attr("refY", 0)
                                .attr("markerWidth", 4)
                                .attr("markerHeight", 4)
                                .attr("orient", "auto")
                                .append("svg:path")
                                        .attr("d", "M0,-5L10,0L0,5");


                        var links = g.append("g")
                                .attr("stroke", "#bbb")
                                .attr("stroke-width", 3)
                                .selectAll("polyline")
                                .data(graph.links)
                                .enter().append("polyline")
                                .attr("points", function(d) { 
                                	return [
                                    d.source.x, d.source.y,
                                    d.source.x/2+d.target.x/2, d.source.y/2+d.target.y/2,
                                    d.target.x, d.target.y
                                  ].join(','); 
                                })
                                .style("marker-mid", "url(#arrow)");


                        var path = g.append("svg:g")
                                .selectAll("line")
                                .data(graph.links)
                                .enter().append("svg:path")
                                .attr("class", "link")
                                .style("stroke-width", "10")
                                .style("stroke", "red")
                                .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; })
                                .attr("marker-end", "url(#arrow)");


                        var nodes = g.selectAll("foreignObject")
                                .data(graph.nodes)
                                .enter()
                                .append("foreignObject")
                                .attr("x", function(d) {
                                        return d.x - rectWidth / 2;
                                })
                                .attr("y", function(d) {
                                        return d.y - rectHeight / 2;
                                })
                                .attr("width", rectWidth)
                                .attr("height", rectHeight)
                                .attr("class", function(d) {
                                        return ("graphNode "+d.group)
                                })
                                .style("background-color", function(d) {
                                        return colors[d.group];
                                })
                                .append("xhtml:div")
                                .classed("graphNodeDiv", true)
                                .html(function(d) {
                                        let nodeHtml = "";
                                        let strippedId = d.id.replace(/\/.*\//, "")
                                        if (d.virtual !== undefined) {
                                                nodeHtml = "<div>"+d.partition+"</div><img src='/images/dummy-icon.png'></img>"
                                        } else if (d.policy !== undefined) {
                                                nodeHtml = "<div>"+d.partition+"</div><img src='/images/ltmp-icon.png'></img>"

                                        } else if (d.pool !== undefined) {
                                                nodeHtml = "<div>"+d.partition+"</div><img src='/images/pool-icon.png'></img>"
                                        }
                                        return strippedId+nodeHtml;
                                })

                        //add drag capabilities
                        var drag_handler = d3.drag()
                                .on("start", drag_start)
                                .on("drag", drag_drag)
                                .on("end", drag_end);
                        drag_handler(nodes);

                        //add zoom capabilities
                        var zoom_handler = d3.zoom()
                                .on("zoom", zoom_actions);
                        zoom_handler(svg);

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

                                //make sure you can't drag the circle outside the box
                        function drag_drag(d) {
                                d.fx = d3.event.x;
                                d.fy = d3.event.y;
                        }

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

                        //Zoom functions
                        function zoom_actions(){
                                g.attr("transform", d3.event.transform)
                        }
                });

@charset "utf-8";
/* CSS Document */

#outputContainer, #outputContainerFlowchart {
    width: 1000px;
/*  margin: 2px;*/
    margin-left: auto;
    margin-right: auto;
    color: #616161;
    font-weight: bold;
    border-radius: 3px;
    word-break: break-word;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 1000px;
}


polyline { stroke: #ccc; stroke-width: 3px; stroke-dasharray: 7, 7; }
.link1 { stroke: #000; stroke-width: 2px;}
.nodetext { pointer-events: none;}

rect {
        border-radius: 20px;
}
div.tooltip {
    position: absolute;
    text-align: center;
    padding: 2px;
    font: 12px sans-serif;
    background: #efefef;
        pointer-events: none;
}

.graphNode {
/*      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
/*      transition: all 0.3s cubic-bezier(.25,.8,.25,1);*/
        border-radius: 3px;
}



.graphNodeDiv {
        width: 100%;
        height: 100%;
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 2px;
        background-color:#dddddd;
}

.graphNodeDiv:hover {
        filter: url(#blur);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <div id="outputContainerFlowchart">
  </div>
  </body>
</html>

PS:对不起我的英语，我希望我能帮助你...

关于javascript - D3 强制布局将链接更改为路径并将箭头放在节点边缘而不是中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55612043/

文章推荐： ios - 当节点下面的节点被删除时，节点不会移动

文章推荐： java - 为什么如果我不实现可序列化我仍然可以序列化一个对象？

文章推荐： ios - 如何在ios 12中将本地视频嵌入到UIView中

文章推荐： swift - 为什么这个函数没有返回任何东西？

.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

商城

javascript - D3 强制布局将链接更改为路径并将箭头放在节点边缘而不是中心