|
//debug panel///////////////////////////////////////////////////////////////////////////// |
|
var alpha = d3.select("#alpha").text("waiting..."), |
|
cog = d3.select("#wrapAlpha").insert("i", "#fdg").classed("fa fa-cog fa-spin", true).datum({instID: null}), |
|
fdgInst = d3.select("#fdg"); |
|
elapsedTime = ElapsedTime("#panel", {margin: 0, padding: 0}) |
|
.message(function (id) { |
|
return 'fps : ' + d3.format(" >8.3f")(1/this.aveLap()) |
|
}); |
|
elapsedTime.consoleOn = false; |
|
|
|
alpha.log = function(e, instID) { |
|
elapsedTime.mark().timestamp(); |
|
alpha.text(d3.format(" >8.4f")(e.alpha)); |
|
fdgInst.text("fdg instance: " + instID); |
|
}; |
|
|
|
d3.select("#update").on("click", (function() { |
|
var dataSet = false; |
|
return function() { |
|
fdg.data(dataSets[(dataSet = !dataSet, +dataSet)]) |
|
} |
|
})()); |
|
d3.select("#jump").on("click", function() { |
|
var jumpXY = 50, |
|
p = d3.transform(fdg.attr("transform")) |
|
.translate.map(function(d){return d+jumpXY}); |
|
fdg.zoomTo({x: p[0], y: p[1]}); |
|
}); |
|
////////////////////////////////////////////////////////////////////////////////////////// |
|
var dataSets = [{ |
|
"nodes" : [ |
|
{"name": "node1", "r": 10}, |
|
{"name": "node2", "r": 10}, |
|
{"name": "node3", "r": 30}, |
|
{"name": "node4", "r": 15} |
|
], |
|
"edges": [ |
|
{"source": 2, "target": 0}, |
|
{"source": 2, "target": 1}, |
|
{"source": 2, "target": 3} |
|
] |
|
}, |
|
{ |
|
"nodes":[ |
|
{"name": "node1", "r": 20}, |
|
{"name": "node2", "r": 10}, |
|
{"name": "node3", "r": 30}, |
|
{"name": "node4", "r": 15}, |
|
{"name": "node5", "r": 10}, |
|
{"name": "node6", "r": 10} |
|
], |
|
"edges":[ |
|
{"source": 2, "target": 0}, |
|
{"source": 2, "target": 1}, |
|
{"source": 2, "target": 3}, |
|
{"source": 2, "target": 4}, |
|
{"source": 2, "target": 5} |
|
] |
|
} |
|
], |
|
svg = SVG({width: 600, height: 200-34, margin: {top: 25, right: 5, bottom: 15, left: 15}}, "#viz", {dblclik: null}), |
|
fdg = FDG(svg, alpha.log).zoomTime(1000) |
|
.on("dblclick", function(d){ |
|
d3.event.stopPropagation(); |
|
fdg.zoomTo(d); |
|
}); |
|
|
|
fdg.data(dataSets[0]); |
|
|
|
function SVG (size, selector, z){ |
|
//delivers an svg background with zoom/drag context in the selector element |
|
//if height or width is NaN, assume it is a valid length but ignore margin |
|
var margin = size.margin || {top: 0, right: 0, bottom: 0, left: 0}, |
|
unitW = isNaN(size.width), unitH = isNaN(size.height), |
|
w = unitW ? size.width : size.width - margin.left - margin.right, |
|
h = unitH ? size.height : size.height - margin.top - margin.bottom, |
|
x, y, xAxis, yAxis, |
|
px = d3.scale.linear() |
|
.domain([-w/2, w/2]) |
|
.range([0, w]), |
|
py = d3.scale.linear() |
|
.domain([-h/2, h/2]) |
|
.range([0, h]), |
|
pxAxis = d3.svg.axis() |
|
.scale(px) |
|
.orient("bottom") |
|
.tickSize(3), |
|
pyAxis = d3.svg.axis() |
|
.scale(py) |
|
.orient("right") |
|
.tickSize(3), |
|
zoomStart = function() {return this}, |
|
zoomed = function(){return this}, |
|
container, |
|
|
|
zoom = d3.behavior.zoom().scaleExtent(z && z.extent || [0.4, 4]) |
|
.on("zoom", function(d, i, j){ |
|
onZoom.call(this, d, i, j); |
|
zoomed.call(this, d, i, j); |
|
}) |
|
.on("zoomstart", function(d, i, j){ |
|
onZoomStart.call(this, d, i, j); |
|
zoomStart.call(this, d, i, j); |
|
}), |
|
svg = d3.select(selector).selectAll("svg").data([["transform root"]]); |
|
svg.enter().append("svg"); |
|
svg.attr({width: size.width, height: size.height}); |
|
|
|
var g = svg.selectAll("#zoom").data(id), |
|
gEnter = g.enter().append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") |
|
.style("cursor", "move") |
|
.call(zoom) |
|
.attr({class: "outline", id: "zoom"}), |
|
zoomText = gEnter.append("text") |
|
.text("g#zoom: transform = translate ( margin.left , margin.top ); .call(zoom)") |
|
.style("fill", "#5c5c5c") |
|
.attr("dy", "-.35em"), |
|
surface = gEnter.append("rect") |
|
.attr({width: w, height: h}) |
|
.style({"pointer-events": "all", fill: "#ccc", "stroke-width": 3, "stroke": "#fff"}), |
|
surfaceText = gEnter.append("text") |
|
.text("event capture surface: style='pointer-events: none'") |
|
.style("fill", "#5c5c5c") |
|
.attr({"dy": "1em", "dx": ".2em"}), |
|
gx = gEnter.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(0," + h + ")") |
|
.call(xAxis || noop), |
|
gy = gEnter.append("g") |
|
.attr("class", "y axis") |
|
.call(yAxis || noop), |
|
gpx = gEnter.append("g") |
|
.attr("class", "x paxis") |
|
.attr("transform", "translate(0," + h + ")") |
|
.call(pxAxis), |
|
gpy = gEnter.append("g") |
|
.attr("class", "y paxis") |
|
.attr("transform", "translate(" + w + ",0)") |
|
.call(pyAxis); |
|
|
|
|
|
if(z && (typeof z.dblclik != "undefined")) gEnter.on("dblclick.zoom", z.dblclik); |
|
|
|
function onZoomStart(){ |
|
// zoom translate and scale are initially [0,0] and 1 |
|
// this needs to be aligned with the container to stop |
|
// jump back to zero before first jump transition |
|
var t = d3.transform(container.attr("transform")); |
|
zoom.translate(t.translate); zoom.scale(t.scale[0]); |
|
} |
|
|
|
function onZoom(){ |
|
var e = d3.event.sourceEvent, |
|
isWheel = e && ((e.type == "mousewheel") || (e.type == "wheel")), |
|
t = d3.transform(container.attr("transform")); |
|
t.translate = d3.event.translate; t.scale = [d3.event.scale, d3.event.scale]; |
|
return isWheel ? zoomWheel.call(this, t) : zoomInst.call(this, t) |
|
} |
|
function zoomInst(t){ |
|
container.attr("transform", t.toString()); |
|
gx.call(xAxis || noop); |
|
gy.call(yAxis || noop); |
|
} |
|
function zoomWheel(t){ |
|
container.transition().duration(450).attr("transform", t.toString()); |
|
gx.transition().duration(450).call(xAxis || noop); |
|
gy.transition().duration(450).call(yAxis || noop); |
|
} |
|
|
|
g.h = h; |
|
g.w = w; |
|
|
|
g.container = function(selector){ |
|
var d3_data, d3_datum; |
|
if(selector) { |
|
container = g.selectAll(selector); |
|
// temporarily subclass container |
|
d3_data = container.data; |
|
d3_datum = container.datum; |
|
// need a reference to the update selection |
|
// so force data methods back to here |
|
container.data = function() { |
|
delete container.data; // remove the sub-classing |
|
return container = d3_data.apply(container, arguments) |
|
} |
|
} |
|
return container; |
|
}; |
|
|
|
g.xScale = function(_){ |
|
var y; |
|
if(!_) return (y = subclass(x, function() { |
|
zoom.x(x); // set the base value for the zoom's understanding of x.domain |
|
gx.call(xAxis || noop); |
|
}), y); |
|
zoom.x(x = _); |
|
gx.call(xAxis || noop); |
|
return this; |
|
}; |
|
g.yScale = function(_){ |
|
if(!_) return subclass(y, function() { |
|
zoom.y(y); // set the base value for the zoom's understanding of y.domain |
|
gy.call(xAxis || noop); |
|
}); |
|
zoom.y(y = _); |
|
gy.call(yAxis || noop); |
|
return this; |
|
}; |
|
g.xAxis = function(_){ |
|
if(!_) return subclass(xAxis, function() { |
|
gx.call(xAxis); |
|
}); |
|
gx.call(xAxis = _); |
|
return this; |
|
}; |
|
g.yAxis = function(_){ |
|
if(!_) return subclass(yAxis, function() { |
|
gy.call(yAxis); |
|
}); |
|
gy.call(yAxis = _) |
|
return this; |
|
}; |
|
|
|
g.zoomTo = function(t, p){ |
|
// map p to the center of the plot surface |
|
var s = zoom.scale(), |
|
p1 = [w/2 - p.x * s, h/2 - p.y * s]; |
|
container.transition().duration(t).call(zoom.translate(p1).event); |
|
}; |
|
|
|
g.onZoom = function(cb){zoomed = cb;}; |
|
g.onZoomStart = function(cb) {zoomStart = cb;}; |
|
|
|
d3.rebind(g, zoom, "translate"); |
|
d3.rebind(g, zoom, "scale"); |
|
|
|
return g; |
|
|
|
function noop(){}; |
|
|
|
function subclass(x, post){ |
|
// hook a post-processor to all methods of x |
|
return Object.keys(x).reduce(function(s, k) { |
|
return (s[k] = function() { |
|
var ret = x[k].apply(x, arguments); |
|
post(); |
|
return ret; |
|
}, s) |
|
}, {}) |
|
} |
|
} |
|
function FDG (svg, tickLog) { |
|
var instID = Date.now(), |
|
size = [svg.w, svg.h], |
|
events = ["mouseover", "mouseout", "click", "dblclick", "contextmenu"], |
|
dispatch = d3.dispatch.apply(null, events), |
|
force = d3.layout.force() |
|
.size(size) |
|
.charge(-1000) |
|
.linkDistance(50) |
|
.on("end", function() { |
|
// manage dead instances of force |
|
// only stop if this instance is the current owner |
|
if(cog.datum().instID != instID) return true; |
|
cog.classed("fa-spin", false); |
|
elapsedTime.stop(); |
|
}) |
|
.on("start", function() { |
|
// mark as active and brand the insID to establish ownership |
|
cog.classed("fa-spin", true).datum().instID = instID; |
|
elapsedTime.start(); |
|
}), |
|
fdg = {}; |
|
|
|
function data(data) { |
|
force |
|
.nodes(data.nodes) |
|
.links(data.edges) |
|
.on("tick", (function(instID) { |
|
return function(e) { |
|
if(tickLog) tickLog.call(this, e, instID); |
|
|
|
contentText.text(function(d){return d()}) |
|
|
|
lines.attr("x1", function(d) { |
|
return d.source.x; |
|
}).attr("y1", function(d) { |
|
return d.source.y; |
|
}).attr("x2", function(d) { |
|
return d.target.x; |
|
}).attr("y2", function(d) { |
|
return d.target.y; |
|
}); |
|
node.attr("transform", function(d) { |
|
return "translate(" + [d.x, d.y] + ")" |
|
}); |
|
var nodesBB = nodes.node().getBBox(), |
|
textBB = nodeText.node().getBBox(); |
|
nodeText |
|
.attr({ |
|
x: nodesBB.x + nodesBB.width/2 - textBB.width/2, |
|
y: nodesBB.y + nodesBB.height, |
|
dy: "-0.35em" |
|
}); |
|
} |
|
})(instID)); |
|
|
|
hookDrag(force.drag(), "dragstart.force", function(d) { |
|
// prevent dragging on the nodes from dragging the canvas |
|
var e = d3.event.sourceEvent; |
|
e.stopPropagation(); |
|
d.fixed = e.shiftKey || e.touches && (e.touches.length > 1); |
|
}); |
|
|
|
hookDrag(force.drag(), "dragend.force", function(d) { |
|
// prevent dragging on the nodes from dragging the canvas |
|
var e = d3.event.sourceEvent; |
|
d.fixed = e.shiftKey || d.fixed; |
|
}); |
|
var x = d3.scale.linear() |
|
.domain([-svg.w/2, svg.w/2]) |
|
.range([0, svg.w]), |
|
y = d3.scale.linear() |
|
.domain([-svg.h/2, svg.h/2]) |
|
.range([0, svg.h]), |
|
xAxis = d3.svg.axis() |
|
.scale(x) |
|
.orient("top") |
|
.tickSize(svg.h), |
|
yAxis = d3.svg.axis() |
|
.scale(y) |
|
.orient("left") |
|
.tickSize(-svg.w); |
|
|
|
svg |
|
.xScale(x) |
|
.yScale(y) |
|
.xAxis(xAxis) |
|
.yAxis(yAxis) |
|
.onZoom(zoomed); |
|
|
|
var content = svg.container("g#fdg").data([data]); |
|
content.enter().append("g").attr({"id": "fdg", class: "outline"}); |
|
|
|
var contentText = content.selectAll(".contentText") |
|
.data([ |
|
function() { |
|
var t = d3.transform(content.attr("transform")); |
|
return "content: transform = translate (" + f(0)(t.translate) + ") scale (" + f(1)(t.scale) + ")"; |
|
function f(p) { |
|
return function _f(x) { |
|
return Array.isArray(x) ? x.map(_f) : d3.format("." + p + "f")(x); |
|
} |
|
} |
|
}]) |
|
.enter().append("text").classed("contentText", true) |
|
.text(function(d){return d()}) |
|
.style("fill", "#5c5c5c") |
|
.attr({"dy": 20, "dx": 20}); |
|
|
|
var lines = content.selectAll(".links") |
|
.data(linksData), |
|
linesEnter = lines.enter() |
|
.insert("line", d3.select("#nodes") ? "#nodes" : null) |
|
.attr("class", "links") |
|
.attr({stroke: "steelblue", "stroke-width": 3}); |
|
var nodes = content.selectAll("#nodes") |
|
.data(nodesData), |
|
nodesEnter = nodes.enter().append("g") |
|
.attr("id", "nodes") |
|
.style("outline", "1px solid black"), |
|
nodeText = content.selectAll(".Nodetext").data(["nodes"]), |
|
nodeTextEnter = nodeText.enter().append("text").classed("Nodetext", true) |
|
.text(id) |
|
.style("fill", "#5c5c5c"), |
|
node = nodes.selectAll(".node") |
|
.data(id), |
|
newNode = node.enter().append("g") |
|
.attr("class", "node") |
|
.style("cursor", "pointer") |
|
.call(force.drag) |
|
.on("mouseover", dispatch.mouseover) |
|
.on("mouseout", dispatch.mouseout) |
|
.on("dblclick", dispatch.dblclick) |
|
.on('contextmenu', function(d, i) { |
|
d3.event.preventDefault(); |
|
dispatch.contextmenu(d, i); |
|
}), |
|
circles = newNode.append("circle") |
|
.attr({class: "content"}) |
|
.attr("r", function(d) { |
|
return d.r |
|
}) |
|
.style({"fill": "red", opacity: 0.8}), |
|
labels = newNode.append("text") |
|
.text(function(d, i) {return i}); |
|
|
|
lines.exit().remove(); |
|
node.exit().remove(); |
|
|
|
//svg.xScale().domain([-svg.w/2, svg.w/2]); |
|
|
|
function nodesData(d) { |
|
return [d.nodes]; |
|
} |
|
|
|
function linksData(d) { |
|
return d.edges; |
|
} |
|
|
|
function hookDrag(target, event, hook) { |
|
//hook force.drag behaviour |
|
var stdDragStart = target.on(event); |
|
target.on(event, function(d) { |
|
hook.call(this, d); |
|
stdDragStart.call(this, d); |
|
}); |
|
} |
|
|
|
function zoomed() { |
|
force.alpha(0.01); |
|
}; |
|
|
|
// zoom context services |
|
// content is the target for zoom movements in zoomed |
|
d3.rebind(fdg, content, "attr"); |
|
// access the current transform state in zoom listener coordinates |
|
d3.rebind(fdg, svg, "translate"); |
|
|
|
fdg.nodes = data.nodes; |
|
|
|
force.start(); |
|
return fdg; |
|
}; |
|
|
|
// events |
|
d3.rebind.bind(null, fdg, dispatch, "on").apply(null, events); |
|
|
|
fdg.zoomTime = (function() { |
|
var _t; |
|
return function(t) { |
|
if(t == undefined) return _t; |
|
if(t == null) return (fdg.zoomTo = svg.zoomTo, this); |
|
fdg.zoomTo = fdg.zoomTo.bind(null, _t = t); |
|
return this; |
|
} |
|
})(); |
|
d3.rebind(fdg, svg, "zoomTo") |
|
fdg.zoomTo = function(t, p){ |
|
// tell svg which point in the domain space maps to the center of the range |
|
svg.zoomTo(t, p); |
|
return this; |
|
}; |
|
|
|
fdg.data = data; |
|
return fdg; |
|
|
|
} |
|
function id(d){return d;} |
|
function myName(args) { |
|
return /function\s+(\w*)\(/.exec(args.callee)[1]; |
|
} |
