tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
mdtrooper 2016-02-26 15:05:48 +01:00
parent fd0ffb8264
commit a93a7c67ff
1 changed files with 94 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
extras/test_d3_00.html Normal file
View File

@ -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>