首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >不使用强制布局的节点和链接的简单图形

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

Stack Overflow用户
提问于 2015-01-23 10:24:54
回答 2查看 21.6K关注 0票数 33

如何创建不使用force()布局的基本连接图(例如,两个节点和一个连接它们的链接)?我只想能够拖动一个节点,并让链接在节点被拖动时保持连接。我不想要任何force()的充电或定位功能。本质上,我希望每个节点都是“粘性的”。节点仅在被拖动时移动。

但是有没有一种简单的方法可以做到这一点呢?我所见过的每一个例子都是围绕着一个力有向图构建的。

我看过这个例子,http://bl.ocks.org/mbostock/3750558,但它从一个力有向图开始,然后使节点变得粘性。对于我想要的东西,这种方法似乎是倒退的。

有没有什么基本的例子?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-01-23 16:20:00

我做了一个很小的代码片段。希望这能对你有所帮助。

代码语言:javascript
复制
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);
代码语言:javascript
复制
svg {
    background-color: grey;
}
代码语言:javascript
复制
<script src="https://d3js.org/d3.v3.min.js"></script>

票数 54
EN

Stack Overflow用户

发布于 2019-04-02 07:39:34

Gilsha有一个很好的答案,但请注意,较新版本的d3不再使用行为模块。

而不是这样:

代码语言:javascript
复制
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);
       }
     });
   });

只需将d3.behavior.drag()更改为d3.drag()

代码语言:javascript
复制
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);
       }
     });
   });
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28102089

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档