commit
af597758aa
@ -342,7 +342,7 @@ svg .bar:hover {
|
||||
svg .line {
|
||||
fill: none;
|
||||
stroke: #ff0000;
|
||||
stroke-width: 2px;
|
||||
stroke-width: 1.2px;
|
||||
shape-rendering: auto;
|
||||
}
|
||||
|
||||
|
@ -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); });
|
||||
|
||||
|
@ -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")
|
||||
|
Loading…
Reference in New Issue
Block a user