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

First version of scroll and pan of new networkmap but it is buggy.

This commit is contained in:
mdtrooper 2016-02-18 16:51:03 +01:00
parent 5659589e01
commit 1d936ad230
2 changed files with 101 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
pandora_console/include/class/Map.class.php
View File

@ -143,6 +143,97 @@ abstract class Map {
}
?>
</script>
<!--
<style>
svg {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
rect {
fill: #ddd;
}
.axis path,
.axis line {
fill: none;
stroke: #fff;
}
</style>
<div id="test"></div>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([-width / 2, width / 2])
.range([0, width]);
var y = d3.scale.linear()
.domain([-height / 2, height / 2])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(-height);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickSize(-width);
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([1, 32])
.on("zoom", zoomed);
var svg = d3.select("#test").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
svg.append("rect")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g").append("circle")
.attr("id", "node_10")
.attr("class", "node")
.attr("cx", "20")
.attr("cy", "20")
.attr("style", "fill: rgb(128, 186, 39);")
.attr("r", "5");
function zoomed() {
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
}
</script>
-->
<?php
}

12
pandora_console/include/javascript/map/MapController.js
View File

@ -30,6 +30,10 @@ MapController.prototype._marginConstant = 0; //To be beauty
/*--------------------Methods----------------------*/
var svg;
function zoom() {
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
/*
Function init_map
@ -37,9 +41,11 @@ Return void
This function init the map
*/
MapController.prototype.init_map = function() {
var svg = d3.select("#map svg");
svg = d3.select("#map svg");
svg
.call(d3.behavior.zoom().scaleExtent([1/100, 100]).on("zoom", zoom))
.append("g");
svg.append("g").append("circle")
.attr("id", "node_10")
@ -105,6 +111,8 @@ MapController.prototype.init_map = function() {
.attr("style", "fill: rgb(50, 50, 128);")
.attr("r", "6");
//Runs tooltipster plugin
$(document).ready(function() {
$('.tooltip').tooltipster();