delenamalan/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Animating the D3 logo as if it were being drawn by hand.
forked from mbostock's block: Animated D3 Logo

  
## index.html
<!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>
	<!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>