3 var margin = { top: 10, right: 10, bottom: 10, left: 10 },
4 width = 1200 - margin.left - margin.right,
5 height = 740 - margin.top - margin.bottom;
7 var formatNumber = d3.format(
",.4f"),
8 format =
function (d) {
return formatNumber(d); },
9 color = d3.scale.category20();
11 var svg, sankey, path;
16 svg = d3.select(
"#chart").append(
"svg")
17 .attr(
"width", width + margin.left + margin.right)
18 .attr(
"height", height + margin.top + margin.bottom)
21 "translate(" + margin.left +
"," + margin.top +
")");
27 .size([width, height]);
32 d3.json(
"Json",
function (error, data) {
33 var graph = JSON.parse(data);
35 graph.nodes.forEach(
function (x) { nodeMap[x.name] = x; });
36 graph.links = graph.links.map(
function (x) {
38 source: nodeMap[x.source],
39 target: nodeMap[x.target],
50 var link = svg.append(
"g").selectAll(
".link")
52 .enter().append(
"path")
53 .attr(
"class",
"link")
55 .style(
"stroke-width",
function (d) {
return Math.max(1, d.dy); })
56 .sort(
function (a, b) {
return b.dy - a.dy; });
61 return d.source.name +
" -> " +
62 d.target.name +
"\n" + format(d.value) +
" MB/s";
66 var node = svg.append(
"g").selectAll(
".node")
69 .attr(
"class",
"node")
70 .attr(
"transform",
function (d) {
71 return "translate(" + d.x +
"," + d.y +
")";
73 .call(d3.behavior.drag()
74 .origin(
function (d) {
return d; })
75 .on(
"dragstart",
function () {
76 this.parentNode.appendChild(
this);
78 .on(
"drag", dragmove));
82 .attr(
"height",
function (d) {
return d.dy; })
83 .attr(
"width",
function (d) {
return d.dx; })
84 .style(
"fill",
function (d) {
85 return d.color = color(d.name.replace(/\..*/,
""));
87 .style(
"stroke",
function (d) {
88 return d3.rgb(d.color).darker(2);
92 return d.name +
"\n" + format(d.repvalue) +
" " + d.unit;
99 .attr(
"y",
function (d) {
return d.dy / 2; })
101 .attr(
"text-anchor",
"end")
102 .attr(
"transform", null)
103 .text(
function (d) {
return d.name; })
104 .filter(
function (d) {
return d.x < width / 2; })
105 .attr(
"x", 6 + sankey.nodeWidth())
106 .attr(
"text-anchor",
"start");
110 .attr(
"y",
function (d) {
return (d.dy / 2) + 18; })
112 .attr(
"text-anchor",
"end")
113 .attr(
"transform", null)
114 .text(
function (d) {
return "Last Update: " + ((Date.now() - d.lastUpdate)/1000).toFixed(2) +
" s ago"; })
115 .filter(
function (d) {
return d.x < width / 2; })
116 .attr(
"x", 6 + sankey.nodeWidth())
117 .attr(
"text-anchor",
"start");
120 function dragmove(d) {
121 d3.select(
this).attr(
"transform",
125 d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))
128 link.attr(
"d", path);
133 $( document ).ready(
function() {