Skip to content

Instantly share code, notes, and snippets.

@pjakobsen

pjakobsen/index.html

Created August 31, 2014 20:28
Show Gist options
  • Save pjakobsen/d707578b95a4d49f6b48 to your computer and use it in GitHub Desktop.
Save pjakobsen/d707578b95a4d49f6b48 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="d3_line"></div>
<script>
var svg = d3.select("#d3_line").append("svg")
.attr("width", 800)
.attr("height", 800);
line1 = {
"x1": 100,
"y1": 50,
"x2": 750,
"y2": 500
};
line2 = {
"x1": 100,
"y1": 200,
"x2": 750,
"y2": 650
};
var data = [];
data.push(line1);
data.push(line2);
var lineID = "";
function update() {
d3.select("#" + lineID).attr("x1", $("#new_x1").val());
$("#new_x1").remove();
}
for (var i = 0; i < data.length; i++) {
var line = d3.select("svg")
.append("svg:line")
.attr("id", ("line" + i))
.attr("x1", data[i].x1)
.attr("y1", data[i].y1)
.attr("x2", data[i].x2)
.attr("y2", data[i].y2)
.style("stroke", "black")
.style("stroke-width", 6)
.on("click", function () {
$(".externalObject").remove();
lineID = d3.select(this).attr("id");
svg.append("foreignObject")
.attr("class", "externalObject")
.attr("x", (d3.event.pageX - 20) + "px")
.attr("y", (d3.event.pageY - 40) + "px")
.attr("width", 200)
.attr("height", 100)
.append("xhtml:div")
.html("<input type='text' id=new_x1 placeholder='input new x1 here' onchange=update()></input>");
});
}
</script>
</body>
</html>
@pjakobsen
Copy link
Author

Moving lines by entering new x pos values in a dynamic text box next to line

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment