lib/graph-printer/old2/index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
cursor: pointer;
}
.node:hover {
stroke: #000;
stroke-width: 1.5px;
}
.node--leaf {
fill: white;
}
.label {
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
.label,
.node--root,
.node--leaf {
pointer-events: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = 20,
diameter = 700;
var color = d3.scale.linear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
var pack = d3.layout.pack()
.padding(2)
.size([diameter - margin, diameter - margin])
.value(function(d) { return 30; })
var svg = d3.select("body").append("svg")
.attr("width", 1200)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
d3.json("scopes.json", function(error, root) {
if (error) return console.error(error);
var focus = root,
nodes = pack.nodes(root),
view;
console.log(nodes);
var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.style("fill", function(d) { return d.children ? color(d.depth) : null; })
.on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });
var text = svg.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("class", "label")
.style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
.style("display", function(d) { return d.parent === root ? null : "none"; })
.text(function(d) { return d.name; })
.each(function(s) {
var last = s.name;
d3.select(this)
.selectAll('tspan')
.data(s.variables)
.enter()
.append('tspan')
.text(function(d) { return ' * ' + d; })
.attr('dx', function(d) {
var l = last;
last = '* ' + d;
return '-' + String((l.length) * 5.5) + 'px';
})
.attr('dy', function(d, i) { return i == 0 ? '2em' : '1.5em' });
});
var node = svg.selectAll("circle,text");
d3.select("body")
.style("background", color(-1))
.on("click", function() { zoom(root); });
zoomTo([root.x, root.y, root.r * 2 + margin]);
function zoom(d) {
var focus0 = focus; focus = d;
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", function(d) {
var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
return function(t) { zoomTo(i(t)); };
});
transition.selectAll("text")
.filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
.style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
.each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
.each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
}
function zoomTo(v) {
var k = diameter / v[2]; view = v;
node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
circle.attr("r", function(d) {
if (d.parent && d.parent.children.length === 1) {
return Math.min(d.r * k, d.parent.r * 0.6);
}
return d.r * k;
});
}
});
// var width = 720,
// height = 720,
// outerRadius = Math.min(width, height) / 2 - 10,
// innerRadius = outerRadius - 24;
//
// var formatPercent = d3.format(".1%");
//
// var arc = d3.svg.arc()
// .innerRadius(innerRadius)
// .outerRadius(outerRadius);
//
// var layout = d3.layout.chord()
// .padding(.04)
// .sortSubgroups(d3.descending)
// .sortChords(d3.ascending);
//
// var path = d3.svg.chord()
// .radius(innerRadius);
//
// var svg = d3.select("body").append("svg")
// .attr("width", width)
// .attr("height", height)
// .append("g")
// .attr("id", "circle")
// .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
//
// svg.append("circle")
// .attr("r", outerRadius);
//
// d3.json("fluxions.json", function(fluxions) {
// var matrix = [];
//
// var flxs = [];
// for (var k in fluxions){
// if (fluxions.hasOwnProperty(k)) {
// flxs.push(k);
// }
// }
// var flxsNb = flxs.length;
//
// for (var i = 0; i < flxsNb; ++i) {
// matrix[i] = [];
// for (var j = 0; j < flxsNb; ++j) {
// matrix[i][j] = 0;
// }
// }
// console.log(flxs);
//
// for (var k in fluxions){
// if (fluxions.hasOwnProperty(k)) {
// for (var t in fluxions[k]){
// if (fluxions[k].hasOwnProperty(t)) {
// console.log(k);
// console.log(flxs.indexOf(k));
// console.log(fluxions[k][t].target);
// console.log(flxs.indexOf(fluxions[k][t].target));
// console.log(matrix);
// matrix[flxs.indexOf(fluxions[k][t].target)][flxs.indexOf(k)] = 1;
// }
// }
// }
// }
//
// // Compute the chord layout.
// layout.matrix(matrix);
//
// // Add a group per neighborhood.
// var group = svg.selectAll(".group")
// .data(layout.groups)
// .enter().append("g")
// .attr("class", "group")
// .on("mouseover", mouseover);
//
// // Add a mouseover title.
// // group.append("title").text(function(d, i) {
// // return cities[i].name + ": " + formatPercent(d.value) + " of origins";
// // });
//
// // Add the group arc.
// var groupPath = group.append("path")
// .attr("id", function(d, i) { return i; })
// .attr("d", arc);
// // .style("fill", function(d, i) { return cities[i].color; });
//
// // Add a text label.
// var groupText = group.append("text")
// .attr("x", 6)
// .attr("dy", 15);
//
// // groupText.append("textPath")
// // .attr("xlink:href", function(d, i) { return "#group" + i; })
// // .text(function(d, i) { return cities[i].name; });
//
// // Remove the labels that don't fit. :(
// // groupText.filter(function(d, i) { return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength(); })
// // .remove();
//
// // Add the chords.
// var chord = svg.selectAll(".chord")
// .data(layout.chords)
// .enter().append("path")
// .attr("class", "chord")
// // .style("fill", function(d) { return cities[d.source.index].color; })
// .attr("d", path);
//
// // Add an elaborate mouseover title for each chord.
// // chord.append("title").text(function(d) {
// // return cities[d.source.index].name
// // + " → " + cities[d.target.index].name
// // + ": " + formatPercent(d.source.value)
// // + "\n" + cities[d.target.index].name
// // + " → " + cities[d.source.index].name
// // + ": " + formatPercent(d.target.value);
// // });
//
// function mouseover(d, i) {
// chord.classed("fade", function(p) {
// return p.source.index != i
// && p.target.index != i;
// });
// }
// });
d3.select(self.frameElement).style("height", diameter + "px");
</script>