不使用强制布局的节点和链接的简单图形 [英] Simple graph of nodes and links without using force layout

问题描述

如何制作不使用 force（）布局的基本连接图（两个节点和连接它们的链接）？我只是希望能够拖动节点并调整链接以在拖动节点时保持连接。我不想要 force（）的任何充电或定位功能。基本上我希望每个节点都粘。节点只会在被拖动时移动。

How can I make a basic connected graph (two nodes and a link connecting them for example) that doesn't use a force() layout? I just want to be able to drag a node and have the link adjust to stay connected as a node is being dragged. I dont want any of the charge or positioning capabilities of force(). Essentially I want every node to be "sticky". Nodes will only move when being dragged.

但是有一种简单的方法吗？我看到的每个例子都是围绕一个力导向图构建的。

But is there a simple way to do this? Every example I have seen is built around a force directed graph.

我看过这个例子， http://bl.ocks.org/mbostock/3750558 ，但它以强制定向图开始，然后使节点变粘。对于我想要的东西，这种方法似乎倒退了。

I've looked at this example, http://bl.ocks.org/mbostock/3750558 , but it starts with a force directed graph then makes the nodes sticky. This approach seems backwards for what I want.

某处有一个基本的例子吗？

Is there a basic example somewhere?

推荐答案

我制作了一个小代码片段。希望这会有所帮助。

I have made a small code snippet. Hope this helpful.

var data = {
   nodes: [{
     name: "A",
     x: 200,
     y: 150
   }, {
     name: "B",
     x: 140,
     y: 300
   }, {
     name: "C",
     x: 300,
     y: 300
   }, {
     name: "D",
     x: 300,
     y: 180
   }],
   links: [{
     source: 0,
     target: 1
   }, {
     source: 1,
     target: 2
   }, {
     source: 2,
     target: 3
   }, ]
 };

 var c10 = d3.scale.category10();
 var svg = d3.select("body")
   .append("svg")
   .attr("width", 1200)
   .attr("height", 800);

 var drag = d3.behavior.drag()
   .on("drag", function(d, i) {
     d.x += d3.event.dx
     d.y += d3.event.dy
     d3.select(this).attr("cx", d.x).attr("cy", d.y);
     links.each(function(l, li) {
       if (l.source == i) {
         d3.select(this).attr("x1", d.x).attr("y1", d.y);
       } else if (l.target == i) {
         d3.select(this).attr("x2", d.x).attr("y2", d.y);
       }
     });
   });

 var links = svg.selectAll("link")
   .data(data.links)
   .enter()
   .append("line")
   .attr("class", "link")
   .attr("x1", function(l) {
     var sourceNode = data.nodes.filter(function(d, i) {
       return i == l.source
     })[0];
     d3.select(this).attr("y1", sourceNode.y);
     return sourceNode.x
   })
   .attr("x2", function(l) {
     var targetNode = data.nodes.filter(function(d, i) {
       return i == l.target
     })[0];
     d3.select(this).attr("y2", targetNode.y);
     return targetNode.x
   })
   .attr("fill", "none")
   .attr("stroke", "white");

 var nodes = svg.selectAll("node")
   .data(data.nodes)
   .enter()
   .append("circle")
   .attr("class", "node")
   .attr("cx", function(d) {
     return d.x
   })
   .attr("cy", function(d) {
     return d.y
   })
   .attr("r", 15)
   .attr("fill", function(d, i) {
     return c10(i);
   })
   .call(drag);

svg {
    background-color: grey;
}

<script src="https://d3js.org/d3.v3.min.js"></script>

这篇关于不使用强制布局的节点和链接的简单图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！