The VisDock toolkit has been integrated into the Delaunay Triangulation example built with D3.js (found here) by M. Bostock. Using selection tools, multiple points (circles) may be queried. The queried objects can be re-located with mouse-click and drag-and-drop when the pointer option is selected.
Last active
January 2, 2016 23:49
-
-
Save VisDockHub/8378966 to your computer and use it in GitHub Desktop.
VisDock Delaunay Triangulation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| path { | |
| fill: yellow; | |
| stroke: #000; | |
| } | |
| circle { | |
| fill: #fff; | |
| stroke: #000; | |
| pointer-events: none; | |
| } | |
| .q0-9{fill:rgb(197,27,125)} | |
| .q1-9{fill:rgb(222,119,174)} | |
| .q2-9{fill:rgb(241,182,218)} | |
| .q3-9{fill:rgb(253,224,239)} | |
| .q4-9{fill:rgb(247,247,247)} | |
| .q5-9{fill:rgb(230,245,208)} | |
| .q6-9{fill:rgb(184,225,134)} | |
| .q7-9{fill:rgb(127,188,65)} | |
| .q8-9{fill:rgb(77,146,33)} | |
| </style> | |
| <body> | |
| <link href="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script type="text/javascript" src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js"></script> | |
| <script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/2D.js"></script> | |
| <script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/IntersectionUtilities.js"></script> | |
| <script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.utils.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| VisDock.init("body", {width: 1200, height: 700}); | |
| var viewport = VisDock.getViewport(); | |
| var circle_query = []; | |
| var mouse_click = []; | |
| var mouse_loc = []; | |
| var vertices = d3.range(100).map(function(d) { | |
| return [Math.random() * width, Math.random() * height]; | |
| }); | |
| var vertices_original = []; | |
| for (i=0;i<vertices.length;i++){ | |
| vertices_original[i] = []; | |
| vertices_original[i][0] = vertices[i][0]; | |
| vertices_original[i][1] = vertices[i][1]; | |
| } | |
| var svg = viewport | |
| var path = svg.append("g").selectAll("path"); | |
| var circ = svg.selectAll("circle") | |
| .data(vertices) | |
| .enter().append("circle") | |
| .attr("transform", function(d) { return "translate(" + d + ")"; }) | |
| .attr("r", 5); | |
| redraw(); | |
| function redraw() { | |
| path = path.data(d3.geom.delaunay(vertices).map(function(d) { return "M" + d.join("L") + "Z"; }), String); | |
| path.exit().remove(); | |
| path.enter().append("path").attr("class", function(d, i) { return "q" + (i % 9) + "-9"; }).attr("d", String); | |
| svg.selectAll("circle").data(vertices) | |
| .attr("transform", function(d) { return "translate(" + d + ")"; }) | |
| .attr("r", 5); | |
| var ellipse = d3.selectAll("circle")[0] | |
| for (var i = 0; i < num; i++){ | |
| var n = QueryManager.layers[i].length; | |
| for (k=0;k < n;k++){ | |
| var circ = ellipse[circle_query[i][k]]; | |
| var t = circ.getAttributeNS(null, "transform") | |
| QueryManager.layers[i][k][0][0].setAttributeNS(null, "transform", t) | |
| } | |
| } | |
| } | |
| function click_event(){ | |
| d3.selectAll("#delauney" + (num-1)).on("mousedown", function(){ | |
| var str = this.getAttributeNS(null,"id").split("delauney")[1]; | |
| var ellipse = d3.selectAll("circle")[0] | |
| mouse_click[parseInt(str)] = 1; | |
| if (mouse_loc[parseInt(str)] == undefined){ | |
| mouse_loc[parseInt(str)] = d3.mouse(d3.selectAll("svg")[0][0]); | |
| } | |
| d3.selectAll("#delauney" + parseInt(str)).attr("pointer-event", "none") | |
| d3.selectAll("svg").on("mousemove", function(){ | |
| if (mouse_click[parseInt(str)] == 1){ | |
| var displace_x = d3.mouse(d3.selectAll("svg")[0][0])[0] - mouse_loc[parseInt(str)][0]; | |
| var displace_y = d3.mouse(d3.selectAll("svg")[0][0])[1] - mouse_loc[parseInt(str)][1]; | |
| for (k=0;k<circle_query[parseInt(str)].length;k++){ | |
| var displace_x2 = d3.mouse(d3.selectAll("svg")[0][0])[0] - vertices[k][0]; | |
| var displace_y2 = d3.mouse(d3.selectAll("svg")[0][0])[1] - vertices[k][1]; | |
| var n = circle_query[parseInt(str)][k]; | |
| vertices[n][0] = vertices_original[n][0] + displace_x; | |
| vertices[n][1] = vertices_original[n][1] + displace_y; | |
| } | |
| redraw(); | |
| } | |
| }) | |
| d3.selectAll("svg").on("mouseup", function(){ | |
| mouse_click[parseInt(str)] = 0; | |
| d3.selectAll("#delauney" + parseInt(str)).attr("pointer-event", "visiblePainted") | |
| }) | |
| }) | |
| } | |
| function find(shapebound, inclusive){ | |
| var hits = []; | |
| var ellip = d3.selectAll("circle")[0] | |
| if (circle_query[num] == undefined) circle_query[num] = []; | |
| for (var i=0;i<ellip.length;i++){ | |
| var captured = shapebound.intersectEllipse([ellip[i]], inclusive) | |
| if (captured.length == 1){ | |
| hits.push(captured[0]) | |
| circle_query[num].push(i); | |
| } | |
| } | |
| return hits; | |
| } | |
| VisDock.eventHandler = { | |
| getHitsPolygon : function(points, inclusive) { | |
| var shapebound = new createPolygon(points); | |
| return find(shapebound,inclusive); | |
| }, | |
| getHitsLine : function(points, inclusive) { | |
| var shapebound = new createLine(points); | |
| return find(shapebound,inclusive); | |
| }, | |
| getHitsEllipse : function(points, inclusive) { | |
| var shapebound = new createEllipse(points); | |
| return find(shapebound,inclusive); | |
| }, | |
| setColor : function(hits) { | |
| for (var i = 0; i < hits.length; i++) { | |
| VisDock.utils.addEllipseLayer(hits[i], "fill: " + VisDock.color[num - 1] + "; opacity: 0.8", num-1); | |
| QueryManager.layers[num - 1][i][0][0].setAttributeNS(null, "id", "delauney" + (num - 1)) | |
| QueryManager.layers[num - 1][i][0][0].setAttributeNS(null, "transform", hits[i].getAttributeNS(null, "transform")) | |
| } | |
| mouse_click[num - 1] = 0; | |
| click_event(); | |
| }, | |
| changeColor : function(color, query, index) { | |
| var vis = VisDock.utils.getQueryVisibility(index); | |
| for (var i = 0; i < query.length; i++) { | |
| query[i][0][0].setAttributeNS(null, "style", "fill: " + color + "; opacity: " + vis) | |
| } | |
| }, | |
| changeVisibility : function(vis, query, index) { | |
| var color = VisDock.utils.getQueryColor(index); | |
| for (var i = 0; i < query.length; i++) { | |
| query[i][0][0].setAttributeNS(null, "style", "fill: " + color + "; opacity: " + vis) | |
| } | |
| }, | |
| removeColor : function(hits, index) { | |
| for (var i = 0; i < hits.length; i++) { | |
| hits[i].remove(); | |
| } | |
| }, | |
| QueryClick : function(query, index) { | |
| } | |
| } | |
| d3.select(self.frameElement).style("height", "730px") | |
| d3.select(self.frameElement).style("width", "1250px") | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment