在 d3js 中移动连接的矩形
Moving connected rectangles in d3js
我正在尝试在 d3js 中连接两个可拖动的矩形。我的要求是
- 具有不同的矩形(例如。A、B、C)
- 所有矩形都应该是可拖动的
- 当我单击一个矩形时,它应该开始画一条线(例如。如果我先点击 A,该行应该从 A.x、A.y 开始。线端应随鼠标点移动)
- 当我在第二个矩形上点击时,该行应以该元素结尾(例如。如果我在A之后点击B,A和B现在应该连接)
到目前为止,我可以拖动矩形,如果它们是静态的,我可以连接它们。但是当我在开玩笑后移动矩形时,线条应该随着矩形移动。
这是我工作的小提琴。谁能指导我到这里?
<svg id="main" width="500" height="500" style="background-color: white">
<rect id="a" x="100" y="100" height="50" width="50" style="fill: blue"></rect>
<rect id="b" x="400" y="400" height="50" width="50" style="fill: blue"></rect>
<line id="c" x1="100" y1="100" y2="400" x2="400" style="stroke:rgb(255,0,0);stroke-width:2;display:none"></line>
</svg>
function move() {
d3.select(this)
.attr('x', d3.event.x - parseInt(d3.select(this).attr("width")) / 2)
.attr('y', d3.event.y - parseInt(d3.select(this).attr("height")) / 2);
}
var drag = d3.behavior.drag().on('drag', move);
d3.select("#a").on('mousedown', function(d){
d3.select("#c").style("display","");//make the line visible when mouse click is down.
}) .call(drag);
d3.select("#b").on('mouseup', function(d){
d3.select('#c')
.attr('x2', 400)
.attr('y2', 400);
//remove all the listeners as we have made the connection line
d3.select("#main").on('mousemove',null);
d3.select("#a").on('mousedown',null);
d3.select("#b").on('mouseup',null);
}) .call(drag);
d3.select("#main").on('mousemove', function(d){
//on mouse move update the line.
var mouseLoc = d3.mouse(this);
d3.select('#c')
.attr('x2', mouseLoc[0]-5)
.attr('y2', mouseLoc[1]-5);
});
您需要相应地使用属性更新行。
下面是一个示例:http://jsfiddle.net/cyril123/kbj4xsmm/12/
var myMapLookup = {c:{ source:'a', target:'b'}};//this will map the line id to its source and target rectangles. this help you track which line is linked to which 2 rectangles.
function move(lineID, me) {
//lineID will gve the id of the line.
var nx = d3.event.x-parseInt(d3.select(me).attr("width"))/2
var ny = d3.event.y-parseInt(d3.select(me).attr("height"))/2
d3.select(me).attr('x', nx)
.attr('y', ny);
//change the line's x and y on dragging
//if source update the x1 and y1
if(d3.select(me).attr('id') == myMapLookup.c.source){
d3.select('#' + lineID).attr('x1', nx).attr('y1', ny);
}
//if source update the x2 and y2
if(d3.select(me).attr('id') == myMapLookup.c.target){
d3.select('#' + lineID).attr('x2', nx).attr('y2', ny);
}
}
d3.select("#a").on('mousedown', function(d){
d3.select("#c").style("display","");//make the line visible when mouse click is down.
d3.select("#c").data({src: 'a', target: 'b'})
});
d3.select("#b").on('mouseup', function(d){
d3.select('#c')
.attr('x2', 400)
.attr('y2', 400);
//remove all the listeners as we have made the connection line
d3.select("#main").on('mousemove',null);
d3.select("#a").on('mousedown',null);
d3.select("#b").on('mouseup',null);
//attach drag listener to all rectangles
var dragA = d3.behavior.drag().on("drag", function(){move('c', this)});
d3.select("#a").call(dragA);
var dragB = d3.behavior.drag().on("drag", function(){move('c', this)});
d3.select("#b").call(dragB);
});
d3.select("#main").on('mousemove', function(d){
//on mouse move update the line.
var mouseLoc = d3.mouse(this);
d3.select('#c')
.attr('x2', mouseLoc[0]-5)
.attr('y2', mouseLoc[1]-5);
});
您可以使用 myMapLookup 来与源矩形和目标矩形进行 rgister 线。这样,您可以有 n 个矩形和 n 条线,并且可以跨相同的拖动代码。
相关文章:
- nodeJS视频流,当用户断开连接或移动到不同页面时,连接不会关闭
- Jquery 移动错误消息,当没有互联网连接加载谷歌地图
- Jquery移动检查时没有互联网连接显示错误消息,而不是加载谷歌地图
- 如何检查移动互联网连接
- 创建我的第一个移动应用程序并将其连接到数据库
- 优化移动/低速连接-全背景视频
- 如何将两个段落连接在一起以内联方式显示,而不会使文本移动
- jsPlumb连接没有相应地移动到元素位置
- 最初我连接到phonegap's数据库,但当我移动到第二个html页面时,我可以;t连接
- 谷歌分析移动应用程序日志显示已连接,但实时跟踪显示0个用户
- 将jQuery移动应用程序连接到服务器数据库,并在互联网连接关闭时打开弹出窗口
- 如何区分在同一列表中拖动和从一个列表移动到连接列表时的可排序更新事件
- 无法向移动设备发送推送通知-连接通知失败:80
- Node.js和Socket.IO从本地开发服务器移动到活动服务器,而不是连接
- jQuery可排序-将放置在外部的项目移动到连接列表
- 移动连接/断开事件
- 如何连接3个动态值文本框并将其移动到剪贴板
- 在断开连接的状态下运行(移动)web应用程序
- 每分钟使用jquery移动检查设备互联网连接
- 在 d3js 中移动连接的矩形