Skip to content

Instantly share code, notes, and snippets.

@dkdndes

dkdndes/jsbin.UhokUTu.html

Created January 10, 2014 18:22
Show Gist options
  • Save dkdndes/8359674 to your computer and use it in GitHub Desktop.
Save dkdndes/8359674 to your computer and use it in GitHub Desktop.
Download ZIP
SVG connected with connector - http://jsbin.com/UhokUTu/1/edit
Raw
jsbin.UhokUTu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>node connect test</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div id="drawArea"></div>
<script type="text/javascript">
// Create a svg canvas
var svg = d3.select("#drawArea")
.append("svg")
.attr("width", 700)
.attr("height", 500);
//Drag nodes
var drag = d3.behavior.drag()
.on("dragstart", function() {
d3.event.sourceEvent.stopPropagation()
})
.on("drag", dragmove);
var line = svg.append("line")
.style("stroke", "black")
.attr("x1", 150)
.attr("y1", 100)
.attr("x2", 250)
.attr("y2", 300);
//First circle
var g1 = svg.append("g")
.attr("transform", "translate(" + 150 + "," + 100 + ")")
.attr("class", "first")
.call(drag)
.append("circle").attr({
r: 20,
})
.style("fill", "#F00")
//Second cicle
var g2 = svg.append("g")
.attr("transform", "translate(" + 250 + "," + 300 + ")")
.attr("class", "second")
.call(drag)
.append("circle").attr({
r: 20,
})
.style("fill", "#00F")
//Drag handler
function dragmove(d) {
var x = d3.event.x;
var y = d3.event.y;
d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
if(d3.select(this).attr("class") == "first") {
line.attr("x1", x);
line.attr("y1", y);
} else {
line.attr("x2", x);
line.attr("y2", y);
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment