diff --git a/public/css/style.css b/public/css/style.css index c3660e4..1f8615c 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -342,7 +342,7 @@ svg .bar:hover { svg .line { fill: none; stroke: #ff0000; - stroke-width: 2px; + stroke-width: 1.2px; shape-rendering: auto; } diff --git a/public/js/directives.js b/public/js/directives.js index 30bc00f..3249798 100644 --- a/public/js/directives.js +++ b/public/js/directives.js @@ -83,8 +83,8 @@ angular.module('netStatsApp.directives', []). data: '=' }, link: function(scope, element, attrs) { - var margin = {top: 0, right: 0, bottom: 0, left: 5}; - var width = 285 - margin.left - margin.right, + var margin = {top: 0, right: 0, bottom: 0, left: 0}; + var width = 280 - margin.left - margin.right, height = 173 - margin.top - margin.bottom; var TICKS = 40; @@ -107,24 +107,30 @@ angular.module('netStatsApp.directives', []). var yAxis = d3.svg.axis() .scale(y) .orient("left") - .ticks(4); + .ticks(4) + .tickFormat(d3.format("%")); var line = d3.svg.line() .x(function(d) { return x(d.x + d.dx); }) .y(function(d) { return y(d.y); }) .interpolate('basis'); - scope.init = function() { - + scope.init = function() + { + // Init data var data = d3.layout.histogram() - .frequency(true) - .bins(x.ticks(TICKS)) - (scope.data); + .frequency(false) + .bins(x.ticks(TICKS)) + (scope.data); + // Adjust y axis y.domain([0, d3.max(data, function(d) { return d.y; })]); + // y.domain([0, 1]); + // Delete previous histogram element.empty(); + /* Start drawing */ var svg = d3.select(".d3-blockpropagation").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) @@ -134,13 +140,12 @@ angular.module('netStatsApp.directives', []). svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") - // .attr("transform", "translate(0,0)") .call(xAxis); svg.append("g") .attr("class", "y axis") - .attr("transform", "translate(0, 0)") - // .attr("transform", "translate(" + width + ", 0)") + // .attr("transform", "translate(0, 0)") + .attr("transform", "translate(" + width + ", 0)") .call(yAxis); @@ -150,8 +155,8 @@ angular.module('netStatsApp.directives', []). .attr("class", "bar") .attr("x", function(d) { return x(d.x) + 1; }) .attr("y", function(d) { return y(d.y); }) - .attr("rx", 1.5) - .attr("ry", 1.5) + .attr("rx", 1) + .attr("ry", 1) .attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1) .attr("height", function(d) { return height - y(d.y); }); diff --git a/public/js/script.js b/public/js/script.js index 05d034e..3f61247 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -26,24 +26,6 @@ moment.relativeTimeThreshold('M', 12); - json = [4292,12436,13141,14268,14650,0,55,774,891,1045,1184,1520,1786,1819,2103,2523,2846,2895,3010,3219,13046,0,284,507,525,1410,1531,1673,1803,1978,2652,2961,4224,4863,5056,12281,0,561,812,903,2161,2210,2312,2450,2559,2725,3273,4559,4727,5868,7777,0,1621,6982,9008,14035,0,1181,2753,2782,3580,3945,5779,7936,21489,0,196,1587,1611,1648,2603,2998,3802,4265,4464,5323,5606,6551,9982,10417,0,884,989,1202,1247,1282,2297,2577,2735,2935,3288,4261,4652,4706,4855,6509]; - - // var data = lineData = d3.layout.histogram() - // .frequency(true) - // .bins(x.ticks(40)) - // (json); - - // y.domain([0, d3.max(data, function(d) { return d.y; })]); - - /* Start drawing */ - - - - // d3.tsv("histogram.tsv", type, function(error, histogram) { - // var n = d3.sum(histogram, function(d) { return d.y = d.a; }); - - // y.domain([0, d3.max(histogram, function(d) { return d.y; })]); - // var bar = svg.insert("g", ".axis") // .attr("class", "bar") // .selectAll("g")