blocks|key|4540268|text|我做了一个很小的代码片段。希望这能对你有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4540269|​|4540270|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+%2B=+d3.event.dx
+++++d.y+%2B=+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);|code-block|syntax|javascript|4540271|svg+{
++++background-color:+grey;
}|4540272|<script+src="https://d3js.org/d3.v3.min.js"></script>|4540273|4540274|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>I have made a small code snippet. Hope this helpful.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    background-color: grey;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|32986|text|Gilsha有一个很好的答案，但请注意，较新版本的d3不再使用行为模块。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|32987|而不是这样：|32988|var+drag+=+d3.behavior.drag()
+++.on("drag",+function(d,+i)+{
+++++d.x+%2B=+d3.event.dx
+++++d.y+%2B=+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);
+++++++}
+++++});
+++});|code-block|syntax|javascript|32989|只需将d3.behavior.drag()更改为d3.drag()|32990|var+drag+=+d3.drag()
+++.on("drag",+function(d,+i)+{
+++++d.x+%2B=+d3.event.dx
+++++d.y+%2B=+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);
+++++++}
+++++});
+++});|32991|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Gilsha has a great answer, but note that newer versions of d3 no longer use the behavior module.</p>

<p>Instead of this:</p>

<pre><code>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);
       }
     });
   });
</code></pre>

<p>Simply change d3.behavior.drag() to d3.drag()</p>

<pre><code>var drag = d3.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);
       }
     });
   });
</code></pre>


<p>How can I make a basic connected graph (two nodes and a link connecting them for example) that doesn't use a <code>force()</code> 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 <code>force()</code>. Essentially I want every node to be "sticky".  Nodes will only move when being dragged.</p>

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

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

<p>Is there a basic example somewhere?</p>


Simple graph of nodes and links without using force layout

如何创建不使用force()布局的基本连接图(例如，两个节点和一个连接它们的链接)？我只想能够拖动一个节点，并让链接在节点被拖动时保持连接。我不想要任何force()的充电或定位功能。本质上，我希望每个节点都是“粘性的”。节点仅在被拖动时移动。但是有没有一种简单的方法可以做到这一点呢？我所见过的每一个例子都是围绕着一个...

问不使用强制布局的节点和链接的简单图形
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不使用强制布局的节点和链接的简单图形EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不使用强制布局的节点和链接的简单图形
EN