00001
00002
00003 var margin = { top: 10, right: 10, bottom: 10, left: 10 },
00004 width = 1200 - margin.left - margin.right,
00005 height = 740 - margin.top - margin.bottom;
00006
00007 var formatNumber = d3.format(",.4f"),
00008 format = function (d) { return formatNumber(d); },
00009 color = d3.scale.category20();
00010
00011 var svg, sankey, path;
00012
00013 function loadData() {
00014 $("#chart").html("");
00015
00016 svg = d3.select("#chart").append("svg")
00017 .attr("width", width + margin.left + margin.right)
00018 .attr("height", height + margin.top + margin.bottom)
00019 .append("g")
00020 .attr("transform",
00021 "translate(" + margin.left + "," + margin.top + ")");
00022
00023
00024 sankey = d3.sankey()
00025 .nodeWidth(36)
00026 .nodePadding(10)
00027 .size([width, height]);
00028
00029 path = sankey.link();
00030
00031
00032 d3.json("Json", function (error, data) {
00033 var graph = JSON.parse(data);
00034 var nodeMap = {};
00035 graph.nodes.forEach(function (x) { nodeMap[x.name] = x; });
00036 graph.links = graph.links.map(function (x) {
00037 return {
00038 source: nodeMap[x.source],
00039 target: nodeMap[x.target],
00040 value: x.value
00041 };
00042 });
00043
00044 sankey
00045 .nodes(graph.nodes)
00046 .links(graph.links)
00047 .layout(32);
00048
00049
00050 var link = svg.append("g").selectAll(".link")
00051 .data(graph.links)
00052 .enter().append("path")
00053 .attr("class", "link")
00054 .attr("d", path)
00055 .style("stroke-width", function (d) { return Math.max(1, d.dy); })
00056 .sort(function (a, b) { return b.dy - a.dy; });
00057
00058
00059 link.append("title")
00060 .text(function (d) {
00061 return d.source.name + " -> " +
00062 d.target.name + "\n" + format(d.value) + " MB/s";
00063 });
00064
00065
00066 var node = svg.append("g").selectAll(".node")
00067 .data(graph.nodes)
00068 .enter().append("g")
00069 .attr("class", "node")
00070 .attr("transform", function (d) {
00071 return "translate(" + d.x + "," + d.y + ")";
00072 })
00073 .call(d3.behavior.drag()
00074 .origin(function (d) { return d; })
00075 .on("dragstart", function () {
00076 this.parentNode.appendChild(this);
00077 })
00078 .on("drag", dragmove));
00079
00080
00081 node.append("rect")
00082 .attr("height", function (d) { return d.dy; })
00083 .attr("width", function (d) { return d.dx; })
00084 .style("fill", function (d) {
00085 return d.color = color(d.name.replace(/\..*/, ""));
00086 })
00087 .style("stroke", function (d) {
00088 return d3.rgb(d.color).darker(2);
00089 })
00090 .append("title")
00091 .text(function (d) {
00092 return d.name + "\n" + format(d.repvalue) + " " + d.unit;
00093 });
00094
00095
00096
00097 node.append("text")
00098 .attr("x", -6)
00099 .attr("y", function (d) { return d.dy / 2; })
00100 .attr("dy", 16)
00101 .attr("text-anchor", "end")
00102 .attr("transform", null)
00103 .text(function (d) { return d.name; })
00104 .filter(function (d) { return d.x < width / 2; })
00105 .attr("x", 6 + sankey.nodeWidth())
00106 .attr("text-anchor", "start");
00107
00108 node.append("text")
00109 .attr("x", -6)
00110 .attr("y", function (d) { return (d.dy / 2) + 18; })
00111 .attr("dy",16)
00112 .attr("text-anchor", "end")
00113 .attr("transform", null)
00114 .text(function (d) { return "Last Update: " + ((Date.now() - d.lastUpdate)/1000).toFixed(2) + " s ago"; })
00115 .filter(function (d) { return d.x < width / 2; })
00116 .attr("x", 6 + sankey.nodeWidth())
00117 .attr("text-anchor", "start");
00118
00119
00120 function dragmove(d) {
00121 d3.select(this).attr("transform",
00122 "translate(" + (
00123 d.x
00124 ) + "," + (
00125 d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))
00126 ) + ")");
00127 sankey.relayout();
00128 link.attr("d", path);
00129 }
00130 });
00131 }
00132
00133 $( document ).ready(function() {
00134 loadData();
00135
00136
00137 });