Skip to content

Instantly share code, notes, and snippets.

@jtr13

jtr13/.block

Last active April 19, 2019 02:46
Show Gist options
  • Save jtr13/cecefce61040db70c408c052ce6ceb9c to your computer and use it in GitHub Desktop.
Save jtr13/cecefce61040db70c408c052ce6ceb9c to your computer and use it in GitHub Desktop.
Download ZIP
Connect the dots
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>line</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h2>Click anywhere on the blue rectangle.</h2>
<script>
var w = 460;
var h = 240;
var maxcircles = 5;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
.on("click", newcircle);
// add background rectangle
svg.append("rect")
.attr("width", w)
.attr("height", h)
.attr("fill", "aliceblue");
function newcircle() {
// add a circle at the click point
svg.append("circle")
.data([d3.mouse(this)])
.attr("cx", d => d[0])
.attr("cy", d => d[1])
.attr("r", "5")
.attr("fill", "red");
// add a line connecting the two circles
var endpts = d3.selectAll("circle").data();
var n = endpts.length;
// if there are more than the maximum number of circles remove first circle and first line
if (n > maxcircles) {
d3.select("circle").remove();
d3.select("line").remove();
}
// if there are at least 2 points draw a line between the last two circles
if (n > 1) {
d3.select("svg")
.append("line")
.attr("x1", endpts[n-2][0])
.attr("y1", endpts[n-2][1])
.attr("x2", endpts[n-1][0])
.attr("y2", endpts[n-1][1])
.attr("stroke", "red");
}
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment