66 lines
2.0 KiB
Plaintext
66 lines
2.0 KiB
Plaintext
<script>
|
|
|
|
var diameter = window.innerHeight;
|
|
|
|
var tree = d3.layout.tree()
|
|
.size([360, diameter])
|
|
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
|
|
|
|
var diagonal = d3.svg.diagonal.radial()
|
|
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
|
|
|
|
var svg = d3.select("#netmap_pane").append("svg")
|
|
.attr("width", window.innerWidth - 50)
|
|
.attr("height", diameter - 100)
|
|
.attr("pointer-events", "all")
|
|
.append('g')
|
|
.call(d3.behavior.zoom().on("zoom", redraw))
|
|
.append("g")
|
|
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
|
|
|
|
// FIXME there must be a way to discover the radial tree's size?
|
|
svg.append('rect')
|
|
.attr("x", (0 - (diameter * 2)))
|
|
.attr('width', "400%")
|
|
.attr("y", (0 - (diameter * 2)))
|
|
.attr('height', "400%")
|
|
.attr('fill', 'white');
|
|
|
|
function redraw() {
|
|
// console.log("here", d3.event.translate, d3.event.scale);
|
|
svg.attr("transform",
|
|
"translate(" + d3.event.translate + ")"
|
|
+ "scale(" + d3.event.scale + ")"
|
|
+ "translate(" + (diameter / 2) + "," + (diameter / 2) + ")");
|
|
}
|
|
|
|
d3.json("[% uri_for('/ajax/data/device/netmap') %]?&q=[% params.q | uri %]", function(error, root) {
|
|
var nodes = tree.nodes(root),
|
|
links = tree.links(nodes);
|
|
|
|
var link = svg.selectAll(".link")
|
|
.data(links)
|
|
.enter().append("path")
|
|
.attr("class", "link")
|
|
.attr("d", diagonal);
|
|
|
|
var node = svg.selectAll(".node")
|
|
.data(nodes)
|
|
.enter().append("g")
|
|
.attr("class", "node")
|
|
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
|
|
|
|
node.append("circle")
|
|
.attr("r", 4.5);
|
|
|
|
node.append("text")
|
|
.attr("dy", ".31em")
|
|
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
|
|
.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
|
|
.text(function(d) { return d.name; });
|
|
});
|
|
|
|
d3.select(self.frameElement).style("height", diameter - 100 + "px");
|
|
|
|
</script>
|