BudgetPie.prototype._initD3 = function() {
var width = this._element.offsetWidth;
var height = this._element.offsetWidth;
var radius = width /2;
var svg = d3.select(slick.find(".chart", this._element))
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
this._layout = d3.layout.pie()
.sort(null)
.value(bindListener(this, function(d) {
return d.dept ? this._parentDept.cash_budget() : 0;
}));
this._arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 70);
this._slice = svg.datum(this._data).selectAll("path").data(this._layout)
.enter().append("path")
.style("fill", function(d) { return d.data.color; })
.attr("d", this._arc);
this._label = svg.append("text")
.text("100%");
}
var Graph = module.exports = function(root, svg) {
this._width = 1000;
this._height = 1000;
this._rootX = this._width/2;
this._rootY = this._height/2;
this.upstreamX = 100;
this.upstreamY = 100;
this._charge = -10000;
this._friction = 0.1;
this._gravity = 0.9;
this._linkDistance = 600;
this._distanceNoiseCoefficient = 0.25;
this._nodes = [];
this._edges = [];
this._upstreamNodes = [];
this._upstreamEdges = [];
this.root = root;
this._selectedNode = root;
this.allNodes = this.root.descendentNodes();
this.svg = svg.append("g").attr("class", "viewport");
this.svg.append("g").attr("class", "edges")
this.svg.append("g").attr("class", "nodes")
this.layout = d3.layout.force();
this._nodeRenderer = new GraphNodes(this);
this._edgeRenderer = new GraphEdges(this);
};
Tree.prototype.init = function(element) {
this._tree = d3.layout.tree()
.size([this._h, this._w]);
this._diagonal = d3.svg.diagonal()
.projection(this.__projection())
this._vis = element.append('svg:svg')
.attr('width', this._w)
.attr('height', this._h)
.attr('transform', 'translate(20,20)');;
this._tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return d.treeLayout.properties
})
this._vis.call(this._tip)
}
require('domready')(function() {
var width = window.innerWidth,
height = window.innerHeight,
padding = 1.5, // separation between same-color nodes
clusterPadding = 2, // separation between different-color nodes
maxRadius = 152;
var app = CanvasApp({
width: width,
height: height
})
var context = app.context
document.body.appendChild(app.canvas)
document.body.style.margin = '0'
document.body.style.overflow = 'hidden'
var n = fonts.length, // total number of nodes
m = fonts.length; // number of distinct clusters
var color = d3.scale.category10()
.domain(d3.range(m));
// The largest node for each cluster.
var clusters = new Array(m);
var nodes = d3.range(n).map(function(el, index) {
var i = index;
// r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius;
r = maxRadius * fonts[index].frequency
var d = {
cluster: i, radius: r,
font: fonts[index],
frequency: fonts[index].frequency
};
if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d;
return d;
});
// Use the pack layout to initialize node positions.
d3.layout.pack()
.sort(function(a, b) {
return b.frequency - a.frequency
})
.size([width, height])
.children(function(d) { return d.values; })
.value(function(d) { return d.radius * d.radius; })
.nodes({values: d3.nest()
.key(function(d) { return d.cluster; })
.entries(nodes)});
var force = d3.layout.force()
.nodes(nodes)
.size([width, height])
.gravity(.06)
.charge(10)
.on("tick", tick)
.start();
var svg = d3.select("body")
.attr("width", width)
.attr("height", height);
var node = svg.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
// .style("fill", function(d) { return color(d.cluster); })
// .call(force.drag);
node.transition()
.duration(750)
.delay(function(d, i) { return i * 5; })
.attrTween("r", function(d) {
var i = d3.interpolate(0, d.radius);
return function(t) { return d.radius = i(t); };
});
function tick(e) {
node
.each(cluster(10 * e.alpha * e.alpha))
.each(collide(0.5))
context.clearRect(0,0,width,height)
context.save()
var s = 0.05
context.translate(width/2,height/2)
context.scale(s,s)
context.beginPath()
context.lineWidth = 7
node.each(function(e) {
renderGlyph(context, e.x, e.y, e.font, CHAR, e.radius / maxRadius)
})
context.lineStyle = 'black'
context.stroke()
context.beginPath()
context.lineWidth = 2
node.each(function(e) {
context.arc(e.x, e.y, e.radius, Math.PI*2, 0, false)
})
context.stroke()
context.restore()
}
// Move d to be adjacent to the cluster node.
function cluster(alpha) {
return function(d) {
var cluster = clusters[d.cluster];
if (cluster === d) return;
var x = d.x - cluster.x,
y = d.y - cluster.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + cluster.radius;
if (l != r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
cluster.x += x;
cluster.y += y;
}
};
}
// Resolves collisions between d and all other circles.
function collide(alpha) {
var quadtree = d3.geom.quadtree(nodes);
return function(d) {
var r = d.radius + maxRadius + Math.max(padding, clusterPadding),
nx1 = d.x - r,
nx2 = d.x + r,
ny1 = d.y - r,
ny2 = d.y + r;
quadtree.visit(function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== d)) {
var x = d.x - quad.point.x,
y = d.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterPadding);
if (l < r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
});
};
}
})
render: function() {
var date = new Date(),
nowDate = date.getDate(),
nowHour = date.getHours();
tempArr = [],
tomorrowDate = dateUtils.getTomorrow().getDate();
this.collection.forEach(function (model) {
var modelDate = model.get('date').getDate(),
isTomorrow = tomorrowDate === modelDate,
isToday = nowDate === modelDate;
if (isToday || isTomorrow) {
var hours = model.get('hours');
hours.forEach(function(hourData) {
var hour = parseInt(hourData.hour);
if ((isToday && hour >= nowHour) || (isTomorrow && hour < nowHour)) {
tempArr.push(hourData.temp);
}
});
}
});
var margin = {
top: 20,
right: 30,
bottom: 30,
left: 20
},
width = 960 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
var tempPxArr = getPxArrOfTempArr(tempArr, height, 2);
this.$el.html(forecastHoursTemplate());
// преобразование числа в подобие времени
var formatHours = function(d) {
d = d + nowHour;
if (d > 23) {
d -= 24;
}
return d + ':00';
};
var x = d3.scale.linear()
.domain([0, tempArr.length])
.range([0, width]);
var data = d3.layout.histogram()
.bins(x.ticks(tempArr.length))
(tempPxArr);
var xAxis = d3.svg.axis()
.scale(x)
.ticks(tempArr.length)
.orient('bottom')
.tickFormat(formatHours);
var svg = d3.select('.forecast_hours__svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var bar = svg.selectAll('forecast_hours__svg_bar')
.data(data)
.enter().append('g')
.attr('class', 'forecast_hours__svg_bar')
.attr('transform', function(d, i) {
return 'translate(' + x(d.x) + ', '+ (height - tempPxArr[i]) +')';
});
bar.append('rect')
.attr('x', 0)
.attr('fill', function(d,i) {
return '#' + temp2color(tempArr[i]);
})
.attr('width', x(data[0].dx) - 1)
.data(tempPxArr)
.attr('height', function(d) {
return d;
});
bar.append('text')
.attr('dy', '-10px')
.attr('y', 5)
.attr('x', x(data[0].dx) / 2)
.attr('text-anchor', 'middle')
.text(function(d,i) {
var tempNow = tempArr[i],
sign = '';
if (tempNow > 0) {
sign = '+';
}
return sign + tempNow;
});
svg.append('g')
.attr('class', 'x forecast_hours__svg_axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
}