histogram improvements

This commit is contained in:
cubedro 2015-04-23 17:03:14 +03:00
parent 338fe37218
commit 07d0574b4d
3 changed files with 19 additions and 32 deletions

View File

@ -342,7 +342,7 @@ svg .bar:hover {
svg .line {
fill: none;
stroke: #ff0000;
stroke-width: 2px;
stroke-width: 1.2px;
shape-rendering: auto;
}

View File

@ -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); });

View File

@ -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")