Animating the D3 logo as if it were being drawn by hand.
forked from mbostock's block: Animated D3 Logo
license: gpl-3.0 |
Animating the D3 logo as if it were being drawn by hand.
forked from mbostock's block: Animated D3 Logo
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.fill { | |
fill: #ccc; | |
} | |
.stroke { | |
fill: none; | |
stroke: #000; | |
stroke-width: 20px; | |
} | |
</style> | |
<svg width="400" height="400"> | |
</svg> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var svg = d3.select("svg"); | |
var text = svg.append("text").attr({ x: 50, y: 50}) | |
.text("test"); | |
var drag = d3.behavior.drag() | |
.on("dragstart", function() { | |
text.text("dragstart"); | |
console.log("dragstart"); | |
}) | |
.on("drag", function() { | |
text.text("drag"); | |
console.log("drag"); | |
d3.select(this) | |
.attr("cx", d3.event.x) | |
.attr("cy", d3.event.y); | |
d3.select(this).style("fill", "red"); | |
}) | |
.on("dragend", function() { | |
text.text("dragend"); | |
console.log("dragend"); | |
d3.select(this) | |
.attr("cx", 200) | |
.attr("cy", 200); | |
d3.select(this).style("fill", "#3BA360"); | |
// See if manually triggering "mousemove" would work. | |
// d3.select(document).on("mousemove")(); | |
}); | |
svg.append("circle") | |
.attr({ | |
r: 100, | |
cx: 200, | |
cy: 200, | |
fill: "#3BA360" | |
}) | |
.style("stroke-width", 3) | |
.on("mouseover", function () { | |
text.text("mouseover"); | |
console.log("mouseover"); | |
d3.select(this).style("stroke", "#000"); | |
}) | |
.on("mousemove", function () { | |
text.text("mousemove"); | |
console.log("mousemove"); | |
}) | |
.on("mouseout", function () { | |
text.text("mouseout"); | |
console.log("mouseout"); | |
d3.select(this).style("stroke", "none"); | |
}) | |
.call(drag) | |
; | |
d3.select(document).on("mousemove", function() { | |
// console.log("mousemove"); | |
}); | |
</script> |