我正在尝试从一个SVG组中拖出一条线并将其放在另一个SVG组上。在我接下来的SVG小组中,我希望能够确定我要去的那个小组的哪个部分。
我有一些代码:
HTML:
<div id="MainDiv">
CSS:
.analogDrag {
cursor: crosshair;
}
JavaScript的:
var startX, startY, linkX, linkY, t;
var selectedNode = null,
startNode = null,
endNode = null;
function startHandler(d) {
startNode = null;
d3.event.sourceEvent.stopPropagation();
d3.select(this).style('cursor', 'move');
this.parentNode.appendChild(this);
endNode = this.id;
startX = parseInt(d.x) + parseInt(d3.select(this.cx.animVal.value)) + 15;
startY = parseInt(d.y) + parseInt(d3.select(this.cy.animVal.value));
linkX = startX;
linkY = startY;
startNode = d3.event.sourceEvent.srcElement.parentNode.id;
}
function onDragDrop(dragHandler, dropHandler) {
var drag = d3.behavior.drag();
drag.on("drag", dragHandler).on("dragstart", startHandler).on("dragend", dropHandler);
return drag;
}
function linkDragMove() {
linkX += d3.event.dx;
linkY += d3.event.dy;
d3.selectAll(".link").remove();
d3.selectAll("svg").append("line").attr("x1", startX).attr("y1", startY).attr("x2", linkX).attr("y2", linkY).attr("stroke", "black").attr("stroke-width", 1).attr("class", "link");
d3.selectAll(".analogDrag").style('cursor', "default");
d3.selectAll(".analogDrop").attr("stroke-width", 6).style('cursor', "crosshair");
}
function linkDropHandler(d) {
d3.select(this).style('cursor', "crosshair");
d3.selectAll(".analogDrag").style('cursor', "crosshair");
d3.selectAll(".analogDrop").attr("stroke-width", 1).style('cursor', "default");
d3.selectAll(".link").remove();
var x, y;
var yAdjust = 0;
if (selectedNode) {
var n = selectedNode[0][0].attributes;
if (selectedNode[0][0].id.charAt(0) == "F") yAdjust = 25;
if (selectedNode[0][0].id.charAt(0) == "K") yAdjust = 40;
if (selectedNode[0][0].id.charAt(0) == "S") yAdjust = 110;
for (var i = 0; i < n.length; i++) {
if (n[i].name == "transform") {
var co = n[i].value.match(/[0-9]+/g);
x = parseInt(co[0]);
y = parseInt(co[1]) + yAdjust;
break; //Stop iterating once the named array has been found
}
}
debugger;
endNode = selectedNode[0][0].id;
//Check if link already exists.
var links = d3.selectAll(".Link").filter("." + startNode + "." + endNode);
if (!links[0][0] || links[0][0].attributes['4'].nodeValue != "Link " + startNode + " " + endNode) { //The link does not already exist
//Draw line to this node.
d3.selectAll("svg").append("path").attr("d", "M " + startX + " " + startY + " L " + " " + x + " " + y).attr("fill-opacity", 0).attr("stroke", "black").attr("stroke-width", 1)
.attr("class", "Link " + startNode + " " + endNode);
}
}
}
var overNode = function (d) {
selectedNode = d;
};
var outNode = function () {
selectedNode = null;
};
var f = function (container) {
var d = [{
x: 100,
y: 0,
moveX: 0,
moveY: 0
}];
var functions = container.data(d).append("g").attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
}).attr("id", "F1");
functions.append("rect").attr({
x: 20,
y: 0,
width: 125,
height: 125,
fill: "#F5F5FF",
stroke: "black",
"stroke-width": 1,
id: "highlight"
});
functions.append("path").attr({
"d": "M 20,10 a10,15 0 0,0 0,30",
fill: "#FFFFFF",
stroke: "black",
"stroke-width": 1,
"class": "analogDrop"
}).on("mouseover", function () {
overNode(functions);
}).on("mouseout", function () {
outNode();
});
functions.append("line").attr({
x1: 0,
y1: 25,
x2: 20,
y2: 25,
stroke: "black",
"stroke-width": 1,
"class": "analogDrop"
}).on("mouseover", function () {
overNode(functions);
}).on("mouseout", function () {
outNode();
});
functions.append("path").attr({
"d": "M 20,80 a10,15 0 0,0 0,30",
fill: "#FFFFFF",
stroke: "black",
"stroke-width": 1,
"class": "analogDrop"
}).on("mouseover", function () {
overNode(functions);
}).on("mouseout", function () {
outNode();
});
functions.append("line").attr({
x1: 0,
y1: 95,
x2: 20,
y2: 95,
stroke: "black",
"stroke-width": 1,
"class": "analogDrop"
}).on("mouseover", function () {
overNode(functions);
}).on("mouseout", function () {
outNode();
});
};
var k = function (container) {
var d = [{
x: 0,
y: 25,
moveX: 0,
moveY: 0
}];
var kn = container.data(d).append("g").attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
})
.attr("id", "K1");
kn.append("circle").attr({
cx: 0,
cy: 0,
r: 15,
stroke: "black",
"stroke-width": 2,
fill: "#FFFFFF",
"class": "analogDrag"
}).call(onDragDrop(linkDragMove, linkDropHandler));
};
d3.selectAll("svg").remove();
var svgContainer = d3.select("#MainDiv").append("svg").attr("width", 800).attr("height", 600).attr("version", 1.1).attr("xmlns", "http://www.w3.org/2000/svg").attr("viewBox", "-40, -40, 1600, 1200");
f(svgContainer);
k(svgContainer);
我也有一个小提琴:
http://jsfiddle.net/Family/x17hxgus/
所以我可以从圆形节点拖动到方形节点上的两个链接,但是我找不到一种方法来确定我放到哪个链接。
我发现确定哪个组已被删除的唯一方法是'selectedNode [0] [0] .id',但我需要更多信息。
有人能帮助我朝正确的方向发展吗?
修改
jsfiddle适用于Chrome和Firefox,但在IE中无效。
答案 0 :(得分:3)
我认为你所拥有的是亲密的。将您的overNode
和outNode
重新定义为:
var selectedNode = null;
var overNode = function () {
selectedNode = this;
};
var outNode = function () {
selectedNode = null;
};
然后将其称为:
functions.append("path").attr({
"d": "M 20,80 a10,15 0 0,0 0,30",
fill: "#FFFFFF",
stroke: "black",
"stroke-width": 1,
"class": "analogDrop"
}).on("mouseover", overNode)
.on("mouseout", outNode);
如果定义了selectedNode,那么你就在那条路径上。
更新了fiddle。