It is my cat and I 'play' with him as I wish

2016-02-26 15:05:48 +01:00 · 2016-02-26 15:05:48 +01:00 · a93a7c67ff
parent fd0ffb8264
commit a93a7c67ff
1 changed files with 94 additions and 0 deletions
--- a/extras/test_d3_00.html
+++ b/extras/test_d3_00.html
@ -0,0 +1,94 @@
+<html>
+	<head>
+		<title>test00</title>
+		<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
+		<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
+	</head>
+	<body>
+		<div id="test"></div>
+		
+<style>
+
+/*
+.overlay {
+  fill: none;
+  pointer-events: all;
+}
+*/
+
+circle {
+	fill: rgb(255, 0, 0);
+}
+
+.clicked {
+	fill: rgb(0, 0, 255);
+}
+
+.overed {
+	stroke: #000;
+	stroke-opacity: 1;
+	stroke-width: 1px;
+}
+
+</style>
+<body>
+<script>
+
+var width = 960,
+    height = 500;
+
+var randomX = d3.random.normal(width / 2, 80),
+    randomY = d3.random.normal(height / 2, 80);
+
+var data = d3.range(20).map(function() {
+  return [
+    randomX(),
+    randomY()
+  ];
+});
+
+var svg = d3.select("#test").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+    .call(d3.behavior.zoom().scaleExtent([1/100, 100]).on("zoom", zoom))
+    
+  .append("g");
+
+svg.append("rect")
+    .attr("class", "overlay")
+    .attr("width", width)
+    .attr("height", height);
+
+i = 0;
+svg.selectAll(".node")
+    .data(data)
+  .enter().append("circle")
+	.attr("class", "node")
+    .attr("r", 2.5)
+    .attr("transform", function(d) { return "translate(" + d + ")"; })
+    .attr("id", function (d) { i++; return "id_" + i;})
+    .on("mousedown", click)
+    .on("mouseover", over);
+
+function over() {
+		$("#" + d3.event.target.id).addClass("overed");
+		
+		d3.event.stopPropagation();
+	}
+
+function click() {
+		$("#" + d3.event.target.id).addClass("clicked");
+		
+		d3.event.stopPropagation();
+	}
+
+function zoom() {
+  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+}
+
+</script>
+		
+		<div id="test"></div>
+		
+	</body>
+</html>