first commit
This commit is contained in:
dev-chiefworks
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+328
@@ -0,0 +1,328 @@
|
||||
// d3.tip
|
||||
// Copyright (c) 2013 Justin Palmer
|
||||
//
|
||||
// Tooltips for d3.js SVG visualizations
|
||||
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module with d3 as a dependency.
|
||||
define(['d3'], factory)
|
||||
} else if (typeof module === 'object' && module.exports) {
|
||||
// CommonJS
|
||||
module.exports = function(d3) {
|
||||
d3.tip = factory(d3)
|
||||
return d3.tip
|
||||
}
|
||||
} else {
|
||||
// Browser global.
|
||||
root.d3.tip = factory(root.d3)
|
||||
}
|
||||
}(this, function (d3) {
|
||||
|
||||
// Public - contructs a new tooltip
|
||||
//
|
||||
// Returns a tip
|
||||
return function() {
|
||||
var direction = d3_tip_direction,
|
||||
offset = d3_tip_offset,
|
||||
html = d3_tip_html,
|
||||
node = initNode(),
|
||||
svg = null,
|
||||
point = null,
|
||||
target = null
|
||||
|
||||
function tip(vis) {
|
||||
svg = getSVGNode(vis)
|
||||
point = svg.createSVGPoint()
|
||||
document.body.appendChild(node)
|
||||
}
|
||||
|
||||
// Public - show the tooltip on the screen
|
||||
//
|
||||
// Returns a tip
|
||||
tip.show = function() {
|
||||
var args = Array.prototype.slice.call(arguments)
|
||||
if(args[args.length - 1] instanceof SVGElement) target = args.pop()
|
||||
|
||||
var content = html.apply(this, args),
|
||||
poffset = offset.apply(this, args),
|
||||
dir = direction.apply(this, args),
|
||||
nodel = getNodeEl(),
|
||||
i = directions.length,
|
||||
coords,
|
||||
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
|
||||
scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
|
||||
|
||||
nodel.html(content)
|
||||
.style({ display: 'block', 'pointer-events': 'all' })
|
||||
.attr('class', 'd3-tip')
|
||||
|
||||
nodel.append('div').attr('class', 'd3-tip-arrow')
|
||||
|
||||
|
||||
while(i--) nodel.classed(directions[i], false)
|
||||
coords = direction_callbacks.get(dir).apply(this)
|
||||
nodel.classed(dir, true).style({
|
||||
top: (coords.top + poffset[0]) + scrollTop + 'px',
|
||||
left: (coords.left + poffset[1]) + scrollLeft + 'px'
|
||||
})
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public - hide the tooltip
|
||||
//
|
||||
// Returns a tip
|
||||
tip.hide = function() {
|
||||
var nodel = getNodeEl()
|
||||
nodel.style({ display: 'none', 'pointer-events': 'none' });
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value.
|
||||
//
|
||||
// n - name of the attribute
|
||||
// v - value of the attribute
|
||||
//
|
||||
// Returns tip or attribute value
|
||||
tip.attr = function(n, v) {
|
||||
if (arguments.length < 2 && typeof n === 'string') {
|
||||
return getNodeEl().attr(n)
|
||||
} else {
|
||||
var args = Array.prototype.slice.call(arguments)
|
||||
d3.selection.prototype.attr.apply(getNodeEl(), args)
|
||||
}
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: Proxy style calls to the d3 tip container. Sets or gets a style value.
|
||||
//
|
||||
// n - name of the property
|
||||
// v - value of the property
|
||||
//
|
||||
// Returns tip or style property value
|
||||
tip.style = function(n, v) {
|
||||
if (arguments.length < 2 && typeof n === 'string') {
|
||||
return getNodeEl().style(n)
|
||||
} else {
|
||||
var args = Array.prototype.slice.call(arguments)
|
||||
d3.selection.prototype.style.apply(getNodeEl(), args)
|
||||
}
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: Set or get the direction of the tooltip
|
||||
//
|
||||
// v - One of n(north), s(south), e(east), or w(west), nw(northwest),
|
||||
// sw(southwest), ne(northeast) or se(southeast)
|
||||
//
|
||||
// Returns tip or direction
|
||||
tip.direction = function(v) {
|
||||
if (!arguments.length) return direction
|
||||
direction = v == null ? v : d3.functor(v)
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: Sets or gets the offset of the tip
|
||||
//
|
||||
// v - Array of [x, y] offset
|
||||
//
|
||||
// Returns offset or
|
||||
tip.offset = function(v) {
|
||||
if (!arguments.length) return offset
|
||||
offset = v == null ? v : d3.functor(v)
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: sets or gets the html value of the tooltip
|
||||
//
|
||||
// v - String value of the tip
|
||||
//
|
||||
// Returns html value or tip
|
||||
tip.html = function(v) {
|
||||
if (!arguments.length) return html
|
||||
html = v == null ? v : d3.functor(v)
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: destroys the tooltip and removes it from the DOM
|
||||
//
|
||||
// Returns a tip
|
||||
tip.destroy = function() {
|
||||
if(node) {
|
||||
getNodeEl().remove();
|
||||
node = null;
|
||||
}
|
||||
return tip;
|
||||
}
|
||||
|
||||
function d3_tip_direction() { return 'n' }
|
||||
function d3_tip_offset() { return [0, 0] }
|
||||
function d3_tip_html() { return ' ' }
|
||||
|
||||
var direction_callbacks = d3.map({
|
||||
n: direction_n,
|
||||
s: direction_s,
|
||||
e: direction_e,
|
||||
w: direction_w,
|
||||
nw: direction_nw,
|
||||
ne: direction_ne,
|
||||
sw: direction_sw,
|
||||
se: direction_se
|
||||
}),
|
||||
|
||||
directions = direction_callbacks.keys()
|
||||
|
||||
function direction_n() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.n.y - node.offsetHeight,
|
||||
left: bbox.n.x - node.offsetWidth / 2
|
||||
}
|
||||
}
|
||||
|
||||
function direction_s() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.s.y,
|
||||
left: bbox.s.x - node.offsetWidth / 2
|
||||
}
|
||||
}
|
||||
|
||||
function direction_e() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.e.y - node.offsetHeight / 2,
|
||||
left: bbox.e.x
|
||||
}
|
||||
}
|
||||
|
||||
function direction_w() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.w.y - node.offsetHeight / 2,
|
||||
left: bbox.w.x - node.offsetWidth
|
||||
}
|
||||
}
|
||||
|
||||
function direction_nw() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.nw.y - node.offsetHeight,
|
||||
left: bbox.nw.x - node.offsetWidth
|
||||
}
|
||||
}
|
||||
|
||||
function direction_ne() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.ne.y - node.offsetHeight,
|
||||
left: bbox.ne.x
|
||||
}
|
||||
}
|
||||
|
||||
function direction_sw() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.sw.y,
|
||||
left: bbox.sw.x - node.offsetWidth
|
||||
}
|
||||
}
|
||||
|
||||
function direction_se() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.se.y,
|
||||
left: bbox.e.x
|
||||
}
|
||||
}
|
||||
|
||||
function initNode() {
|
||||
var node = d3.select(document.createElement('div'))
|
||||
node.style({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
display: 'none',
|
||||
'pointer-events': 'none',
|
||||
'box-sizing': 'border-box'
|
||||
})
|
||||
|
||||
return node.node()
|
||||
}
|
||||
|
||||
function getSVGNode(el) {
|
||||
el = el.node()
|
||||
if(el.tagName.toLowerCase() === 'svg')
|
||||
return el
|
||||
|
||||
return el.ownerSVGElement
|
||||
}
|
||||
|
||||
function getNodeEl() {
|
||||
if(node === null) {
|
||||
node = initNode();
|
||||
// re-add node to DOM
|
||||
document.body.appendChild(node);
|
||||
};
|
||||
return d3.select(node);
|
||||
}
|
||||
|
||||
// Private - gets the screen coordinates of a shape
|
||||
//
|
||||
// Given a shape on the screen, will return an SVGPoint for the directions
|
||||
// n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
|
||||
// sw(southwest).
|
||||
//
|
||||
// +-+-+
|
||||
// | |
|
||||
// + +
|
||||
// | |
|
||||
// +-+-+
|
||||
//
|
||||
// Returns an Object {n, s, e, w, nw, sw, ne, se}
|
||||
function getScreenBBox() {
|
||||
var targetel = target || d3.event.target;
|
||||
|
||||
while ('undefined' === typeof targetel.getScreenCTM && 'undefined' === targetel.parentNode) {
|
||||
targetel = targetel.parentNode;
|
||||
}
|
||||
|
||||
var bbox = {},
|
||||
matrix = targetel.getScreenCTM(),
|
||||
tbbox = targetel.getBBox(),
|
||||
width = tbbox.width,
|
||||
height = tbbox.height,
|
||||
x = tbbox.x,
|
||||
y = tbbox.y
|
||||
|
||||
point.x = x
|
||||
point.y = y
|
||||
bbox.nw = point.matrixTransform(matrix)
|
||||
point.x += width
|
||||
bbox.ne = point.matrixTransform(matrix)
|
||||
point.y += height
|
||||
bbox.se = point.matrixTransform(matrix)
|
||||
point.x -= width
|
||||
bbox.sw = point.matrixTransform(matrix)
|
||||
point.y -= height / 2
|
||||
bbox.w = point.matrixTransform(matrix)
|
||||
point.x += width
|
||||
bbox.e = point.matrixTransform(matrix)
|
||||
point.x -= width / 2
|
||||
point.y -= height / 2
|
||||
bbox.n = point.matrixTransform(matrix)
|
||||
point.y += height
|
||||
bbox.s = point.matrixTransform(matrix)
|
||||
|
||||
return bbox
|
||||
}
|
||||
|
||||
return tip
|
||||
};
|
||||
|
||||
}));
|
||||
+848
@@ -0,0 +1,848 @@
|
||||
(function(venn) {
|
||||
"use strict";
|
||||
/** given a list of set objects, and their corresponding overlaps.
|
||||
updates the (x, y, radius) attribute on each set such that their positions
|
||||
roughly correspond to the desired overlaps */
|
||||
venn.venn = function(sets, overlaps, parameters) {
|
||||
parameters = parameters || {};
|
||||
parameters.maxIterations = parameters.maxIterations || 500;
|
||||
var lossFunction = parameters.lossFunction || venn.lossFunction;
|
||||
var initialLayout = parameters.layoutFunction || venn.greedyLayout;
|
||||
|
||||
// initial layout is done greedily
|
||||
sets = initialLayout(sets, overlaps);
|
||||
|
||||
// transform x/y coordinates to a vector to optimize
|
||||
var initial = new Array(2*sets.length);
|
||||
for (var i = 0; i < sets.length; ++i) {
|
||||
initial[2 * i] = sets[i].x;
|
||||
initial[2 * i + 1] = sets[i].y;
|
||||
}
|
||||
|
||||
// optimize initial layout from our loss function
|
||||
var totalFunctionCalls = 0;
|
||||
var solution = venn.fmin(
|
||||
function(values) {
|
||||
totalFunctionCalls += 1;
|
||||
var current = new Array(sets.length);
|
||||
for (var i = 0; i < sets.length; ++i) {
|
||||
current[i] = {x: values[2 * i],
|
||||
y: values[2 * i + 1],
|
||||
radius : sets[i].radius,
|
||||
size : sets[i].size};
|
||||
}
|
||||
return lossFunction(current, overlaps);
|
||||
},
|
||||
initial,
|
||||
parameters);
|
||||
|
||||
// transform solution vector back to x/y points
|
||||
var positions = solution.solution;
|
||||
for (i = 0; i < sets.length; ++i) {
|
||||
sets[i].x = positions[2 * i];
|
||||
sets[i].y = positions[2 * i + 1];
|
||||
}
|
||||
|
||||
return sets;
|
||||
};
|
||||
|
||||
/** Returns the distance necessary for two circles of radius r1 + r2 to
|
||||
have the overlap area 'overlap' */
|
||||
venn.distanceFromIntersectArea = function(r1, r2, overlap) {
|
||||
// handle complete overlapped circles
|
||||
if (Math.min(r1, r2) * Math.min(r1,r2) * Math.PI <= overlap) {
|
||||
return Math.abs(r1 - r2);
|
||||
}
|
||||
|
||||
return venn.bisect(function(distance) {
|
||||
return venn.circleOverlap(r1, r2, distance) - overlap;
|
||||
}, 0, r1 + r2);
|
||||
};
|
||||
|
||||
/// gets a matrix of euclidean distances between all sets in venn diagram
|
||||
venn.getDistanceMatrix = function(sets, overlaps) {
|
||||
// initialize an empty distance matrix between all the points
|
||||
var distances = [];
|
||||
for (var i = 0; i < sets.length; ++i) {
|
||||
distances.push([]);
|
||||
for (var j = 0; j < sets.length; ++j) {
|
||||
distances[i].push(0);
|
||||
}
|
||||
}
|
||||
|
||||
// compute distances between all the points
|
||||
for (i = 0; i < overlaps.length; ++i) {
|
||||
var current = overlaps[i];
|
||||
if (current.sets.length !== 2) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var left = current.sets[0],
|
||||
right = current.sets[1],
|
||||
r1 = Math.sqrt(sets[left].size / Math.PI),
|
||||
r2 = Math.sqrt(sets[right].size / Math.PI),
|
||||
distance = venn.distanceFromIntersectArea(r1, r2, current.size);
|
||||
distances[left][right] = distances[right][left] = distance;
|
||||
}
|
||||
return distances;
|
||||
};
|
||||
|
||||
/** Lays out a Venn diagram greedily, going from most overlapped sets to
|
||||
least overlapped, attempting to position each new set such that the
|
||||
overlapping areas to already positioned sets are basically right */
|
||||
venn.greedyLayout = function(sets, overlaps) {
|
||||
// give each set a default position + radius
|
||||
var setOverlaps = {};
|
||||
for (var i = 0; i < sets.length; ++i) {
|
||||
setOverlaps[i] = [];
|
||||
sets[i].radius = Math.sqrt(sets[i].size / Math.PI);
|
||||
sets[i].x = sets[i].y = 0;
|
||||
}
|
||||
|
||||
// map each set to a list of all the other sets that overlap it
|
||||
for (i = 0; i < overlaps.length; ++i) {
|
||||
var current = overlaps[i];
|
||||
if (current.sets.length !== 2) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var weight = (current.weight == null) ? 1.0 : current.weight;
|
||||
var left = current.sets[0], right = current.sets[1];
|
||||
setOverlaps[left].push ({set:right, size:current.size, weight:weight});
|
||||
setOverlaps[right].push({set:left, size:current.size, weight:weight});
|
||||
}
|
||||
|
||||
// get list of most overlapped sets
|
||||
var mostOverlapped = [];
|
||||
for (var set in setOverlaps) {
|
||||
if (setOverlaps.hasOwnProperty(set)) {
|
||||
var size = 0;
|
||||
for (i = 0; i < setOverlaps[set].length; ++i) {
|
||||
size += setOverlaps[set][i].size * setOverlaps[set][i].weight;
|
||||
}
|
||||
|
||||
mostOverlapped.push({set: set, size:size});
|
||||
}
|
||||
}
|
||||
|
||||
// sort by size desc
|
||||
function sortOrder(a,b) {
|
||||
return b.size - a.size;
|
||||
}
|
||||
mostOverlapped.sort(sortOrder);
|
||||
|
||||
// keep track of what sets have been laid out
|
||||
var positioned = {};
|
||||
function isPositioned(element) {
|
||||
return element.set in positioned;
|
||||
}
|
||||
|
||||
// adds a point to the output
|
||||
function positionSet(point, index) {
|
||||
sets[index].x = point.x;
|
||||
sets[index].y = point.y;
|
||||
positioned[index] = true;
|
||||
}
|
||||
|
||||
// add most overlapped set at (0,0)
|
||||
positionSet({x: 0, y: 0}, mostOverlapped[0].set);
|
||||
|
||||
// get distances between all points
|
||||
var distances = venn.getDistanceMatrix(sets, overlaps);
|
||||
|
||||
for (i = 1; i < mostOverlapped.length; ++i) {
|
||||
var setIndex = mostOverlapped[i].set,
|
||||
overlap = setOverlaps[setIndex].filter(isPositioned);
|
||||
set = sets[setIndex];
|
||||
overlap.sort(sortOrder);
|
||||
|
||||
if (overlap.length === 0) {
|
||||
throw "Need overlap information for set " + JSON.stringify( set );
|
||||
}
|
||||
|
||||
var points = [];
|
||||
for (var j = 0; j < overlap.length; ++j) {
|
||||
// get appropriate distance from most overlapped already added set
|
||||
var p1 = sets[overlap[j].set],
|
||||
d1 = distances[setIndex][overlap[j].set];
|
||||
|
||||
// sample positions at 90 degrees for maximum aesthetics
|
||||
points.push({x : p1.x + d1, y : p1.y});
|
||||
points.push({x : p1.x - d1, y : p1.y});
|
||||
points.push({y : p1.y + d1, x : p1.x});
|
||||
points.push({y : p1.y - d1, x : p1.x});
|
||||
|
||||
// if we have at least 2 overlaps, then figure out where the
|
||||
// set should be positioned analytically and try those too
|
||||
for (var k = j + 1; k < overlap.length; ++k) {
|
||||
var p2 = sets[overlap[k].set],
|
||||
d2 = distances[setIndex][overlap[k].set];
|
||||
|
||||
var extraPoints = venn.circleCircleIntersection(
|
||||
{ x: p1.x, y: p1.y, radius: d1},
|
||||
{ x: p2.x, y: p2.y, radius: d2});
|
||||
|
||||
for (var l = 0; l < extraPoints.length; ++l) {
|
||||
points.push(extraPoints[l]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// we have some candidate positions for the set, examine loss
|
||||
// at each position to figure out where to put it at
|
||||
var bestLoss = 1e50, bestPoint = points[0];
|
||||
for (j = 0; j < points.length; ++j) {
|
||||
sets[setIndex].x = points[j].x;
|
||||
sets[setIndex].y = points[j].y;
|
||||
var loss = venn.lossFunction(sets, overlaps);
|
||||
if (loss < bestLoss) {
|
||||
bestLoss = loss;
|
||||
bestPoint = points[j];
|
||||
}
|
||||
}
|
||||
|
||||
positionSet(bestPoint, setIndex);
|
||||
}
|
||||
|
||||
return sets;
|
||||
};
|
||||
|
||||
/// Uses multidimensional scaling to approximate a first layout here
|
||||
venn.classicMDSLayout = function(sets, overlaps) {
|
||||
// get the distance matrix
|
||||
var distances = venn.getDistanceMatrix(sets, overlaps);
|
||||
|
||||
// get positions for each set
|
||||
var positions = mds.classic(distances);
|
||||
|
||||
// translate back to (x,y,radius) coordinates
|
||||
for (var i = 0; i < sets.length; ++i) {
|
||||
sets[i].x = positions[i][0];
|
||||
sets[i].y = positions[i][1];
|
||||
sets[i].radius = Math.sqrt(sets[i].size / Math.PI);
|
||||
}
|
||||
return sets;
|
||||
};
|
||||
|
||||
/** Given a bunch of sets, and the desired overlaps between these sets - computes
|
||||
the distance from the actual overlaps to the desired overlaps. Note that
|
||||
this method ignores overlaps of more than 2 circles */
|
||||
venn.lossFunction = function(sets, overlaps) {
|
||||
var output = 0;
|
||||
|
||||
function getCircles(indices) {
|
||||
return indices.map(function(i) { return sets[i]; });
|
||||
}
|
||||
|
||||
for (var i = 0; i < overlaps.length; ++i) {
|
||||
var area = overlaps[i], overlap;
|
||||
if (area.sets.length == 2) {
|
||||
var left = sets[area.sets[0]],
|
||||
right = sets[area.sets[1]];
|
||||
overlap = venn.circleOverlap(left.radius, right.radius,
|
||||
venn.distance(left, right));
|
||||
} else {
|
||||
overlap = venn.intersectionArea(getCircles(area.sets));
|
||||
}
|
||||
|
||||
var weight = (area.weight == null) ? 1.0 : area.weight;
|
||||
output += weight * (overlap - area.size) * (overlap - area.size);
|
||||
}
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
/** Scales a solution from venn.venn or venn.greedyLayout such that it fits in
|
||||
a rectangle of width/height - with padding around the borders. also
|
||||
centers the diagram in the available space at the same time */
|
||||
venn.scaleSolution = function(solution, width, height, padding) {
|
||||
var minMax = function(d) {
|
||||
var hi = Math.max.apply(null, solution.map(
|
||||
function(c) { return c[d] + c.radius; } )),
|
||||
lo = Math.min.apply(null, solution.map(
|
||||
function(c) { return c[d] - c.radius;} ));
|
||||
return {max:hi, min:lo};
|
||||
};
|
||||
|
||||
width -= 2*padding;
|
||||
height -= 2*padding;
|
||||
|
||||
var xRange = minMax('x'),
|
||||
yRange = minMax('y'),
|
||||
xScaling = width / (xRange.max - xRange.min),
|
||||
yScaling = height / (yRange.max - yRange.min),
|
||||
scaling = Math.min(yScaling, xScaling),
|
||||
|
||||
// while we're at it, center the diagram too
|
||||
xOffset = (width - (xRange.max - xRange.min) * scaling) / 2,
|
||||
yOffset = (height - (yRange.max - yRange.min) * scaling) / 2;
|
||||
|
||||
for (var i = 0; i < solution.length; ++i) {
|
||||
var set = solution[i];
|
||||
set.radius = scaling * set.radius;
|
||||
set.x = padding + xOffset + (set.x - xRange.min) * scaling;
|
||||
set.y = padding + yOffset + (set.y - yRange.min) * scaling;
|
||||
}
|
||||
|
||||
return solution;
|
||||
};
|
||||
|
||||
// sometimes text doesn't fit inside the circle, if thats the case lets wrap
|
||||
// the text here such that it fits
|
||||
// todo: looks like this might be merged into d3 (
|
||||
// https://github.com/mbostock/d3/issues/1642),
|
||||
// also worth checking out is
|
||||
// http://engineering.findthebest.com/wrapping-axis-labels-in-d3-js/
|
||||
// this seems to be one of those things that should be easy but isn't
|
||||
function wrapText() {
|
||||
var text = d3.select(this),
|
||||
data = text.datum(),
|
||||
width = data.radius,
|
||||
words = data.label.split(/\s+/).reverse(),
|
||||
maxLines = 3,
|
||||
minChars = (data.label.length + words.length) / maxLines,
|
||||
word = words.pop(),
|
||||
line = [word],
|
||||
joined,
|
||||
lineNumber = 0,
|
||||
lineHeight = 1.1, // ems
|
||||
tspan = text.text(null).append("tspan").text(word);
|
||||
|
||||
while (word = words.pop()) {
|
||||
line.push(word);
|
||||
joined = line.join(" ");
|
||||
tspan.text(joined);
|
||||
if (joined.length > minChars && tspan.node().getComputedTextLength() > width) {
|
||||
line.pop();
|
||||
tspan.text(line.join(" "));
|
||||
line = [word];
|
||||
tspan = text.append("tspan").text(word);
|
||||
lineNumber++;
|
||||
}
|
||||
}
|
||||
|
||||
var initial = 0.35 - lineNumber * lineHeight / 2,
|
||||
x = Math.floor(data.textCenter.x),
|
||||
y = Math.floor(data.textCenter.y);
|
||||
|
||||
text.selectAll("tspan")
|
||||
.attr("x", x)
|
||||
.attr("y", y)
|
||||
.attr("dy", function(d, i) {
|
||||
return (initial + i * lineHeight) + "em";
|
||||
});
|
||||
}
|
||||
|
||||
function weightedSum(a, b) {
|
||||
var ret = new Array(a[1].length || 0);
|
||||
for (var j = 0; j < ret.length; ++j) {
|
||||
ret[j] = a[0] * a[1][j] + b[0] * b[1][j];
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
/** finds the zeros of a function, given two starting points (which must
|
||||
* have opposite signs */
|
||||
venn.bisect = function(f, a, b, parameters) {
|
||||
parameters = parameters || {};
|
||||
var maxIterations = parameters.maxIterations || 100,
|
||||
tolerance = parameters.tolerance || 1e-10,
|
||||
fA = f(a),
|
||||
fB = f(b),
|
||||
delta = b - a;
|
||||
|
||||
if (fA * fB > 0) {
|
||||
throw "Initial bisect points must have opposite signs";
|
||||
}
|
||||
|
||||
if (fA === 0) return a;
|
||||
if (fB === 0) return b;
|
||||
|
||||
for (var i = 0; i < maxIterations; ++i) {
|
||||
delta /= 2;
|
||||
var mid = a + delta,
|
||||
fMid = f(mid);
|
||||
|
||||
if (fMid * fA >= 0) {
|
||||
a = mid;
|
||||
}
|
||||
|
||||
if ((Math.abs(delta) < tolerance) || (fMid === 0)) {
|
||||
return mid;
|
||||
}
|
||||
}
|
||||
return a + delta;
|
||||
};
|
||||
|
||||
/** minimizes a function using the downhill simplex method */
|
||||
venn.fmin = function(f, x0, parameters) {
|
||||
parameters = parameters || {};
|
||||
|
||||
var maxIterations = parameters.maxIterations || x0.length * 200,
|
||||
nonZeroDelta = parameters.nonZeroDelta || 1.1,
|
||||
zeroDelta = parameters.zeroDelta || 0.001,
|
||||
minErrorDelta = parameters.minErrorDelta || 1e-5,
|
||||
rho = parameters.rho || 1,
|
||||
chi = parameters.chi || 2,
|
||||
psi = parameters.psi || -0.5,
|
||||
sigma = parameters.sigma || 0.5,
|
||||
callback = parameters.callback;
|
||||
|
||||
// initialize simplex.
|
||||
var N = x0.length,
|
||||
simplex = new Array(N + 1);
|
||||
simplex[0] = x0;
|
||||
simplex[0].fx = f(x0);
|
||||
for (var i = 0; i < N; ++i) {
|
||||
var point = x0.slice();
|
||||
point[i] = point[i] ? point[i] * nonZeroDelta : zeroDelta;
|
||||
simplex[i+1] = point;
|
||||
simplex[i+1].fx = f(point);
|
||||
}
|
||||
|
||||
var sortOrder = function(a, b) { return a.fx - b.fx; };
|
||||
|
||||
for (var iteration = 0; iteration < maxIterations; ++iteration) {
|
||||
simplex.sort(sortOrder);
|
||||
if (callback) {
|
||||
callback(simplex);
|
||||
}
|
||||
|
||||
if (Math.abs(simplex[0].fx - simplex[N].fx) < minErrorDelta) {
|
||||
break;
|
||||
}
|
||||
|
||||
// compute the centroid of all but the worst point in the simplex
|
||||
var centroid = new Array(N);
|
||||
for (i = 0; i < N; ++i) {
|
||||
centroid[i] = 0;
|
||||
for (var j = 0; j < N; ++j) {
|
||||
centroid[i] += simplex[j][i];
|
||||
}
|
||||
centroid[i] /= N;
|
||||
}
|
||||
|
||||
// reflect the worst point past the centroid and compute loss at reflected
|
||||
// point
|
||||
var worst = simplex[N];
|
||||
var reflected = weightedSum([1+rho, centroid], [-rho, worst]);
|
||||
reflected.fx = f(reflected);
|
||||
|
||||
var replacement = reflected;
|
||||
|
||||
// if the reflected point is the best seen, then possibly expand
|
||||
if (reflected.fx <= simplex[0].fx) {
|
||||
var expanded = weightedSum([1+chi, centroid], [-chi, worst]);
|
||||
expanded.fx = f(expanded);
|
||||
if (expanded.fx < reflected.fx) {
|
||||
replacement = expanded;
|
||||
}
|
||||
}
|
||||
|
||||
// if the reflected point is worse than the second worst, we need to
|
||||
// contract
|
||||
else if (reflected.fx >= simplex[N-1].fx) {
|
||||
var shouldReduce = false;
|
||||
var contracted;
|
||||
|
||||
if (reflected.fx <= worst.fx) {
|
||||
// do an inside contraction
|
||||
contracted = weightedSum([1+psi, centroid], [-psi, worst]);
|
||||
contracted.fx = f(contracted);
|
||||
if (contracted.fx < worst.fx) {
|
||||
replacement = contracted;
|
||||
} else {
|
||||
shouldReduce = true;
|
||||
}
|
||||
} else {
|
||||
// do an outside contraction
|
||||
contracted = weightedSum([1-psi * rho, centroid], [psi*rho, worst]);
|
||||
contracted.fx = f(contracted);
|
||||
if (contracted.fx <= reflected.fx) {
|
||||
replacement = contracted;
|
||||
} else {
|
||||
shouldReduce = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (shouldReduce) {
|
||||
// do reduction. doesn't actually happen that often
|
||||
for (i = 1; i < simplex.length; ++i) {
|
||||
simplex[i] = weightedSum([1 - sigma, simplex[0]],
|
||||
[sigma - 1, simplex[i]]);
|
||||
simplex[i].fx = f(simplex[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
simplex[N] = replacement;
|
||||
}
|
||||
|
||||
simplex.sort(sortOrder);
|
||||
return {f : simplex[0].fx,
|
||||
solution : simplex[0]};
|
||||
};
|
||||
|
||||
/** returns a svg path of the intersection area of a bunch of circles */
|
||||
venn.intersectionAreaPath = function(circles) {
|
||||
var stats = {};
|
||||
venn.intersectionArea(circles, stats);
|
||||
var arcs = stats.arcs;
|
||||
|
||||
if (arcs.length === 0) {
|
||||
return "M 0 0";
|
||||
}
|
||||
|
||||
var ret = ["\nM", arcs[0].p2.x, arcs[0].p2.y];
|
||||
for (var i = 0; i < arcs.length; ++i) {
|
||||
var arc = arcs[i], r = arc.circle.radius, wide = arc.width > r;
|
||||
ret.push("\nA", r, r, 0, wide ? 1 : 0, 1, arc.p1.x, arc.p1.y);
|
||||
}
|
||||
|
||||
return ret.join(" ");
|
||||
};
|
||||
|
||||
// computes the center for text by sampling perimiter of circle, and taking
|
||||
// the average of points on perimeter that are only in that circle
|
||||
function computeTextCenters(sets, width, height, diagram) {
|
||||
// basically just finding the center point of each region by sampling
|
||||
// points in a grid and taking the average sampled point for each region
|
||||
// There is probably an analytic way of computing this exactly, but
|
||||
// this works well enough for our purposes
|
||||
var sums = [];
|
||||
for (var i = 0; i < sets.length; ++i) {
|
||||
sums.push({'x' : 0, 'y' : 0, 'count' : 0});
|
||||
}
|
||||
|
||||
var samples = 32;
|
||||
for (var i = 0; i < samples; ++i) {
|
||||
var x = i * width / samples;
|
||||
for (var j = 0; j < samples; ++j) {
|
||||
var y = j * height / samples;
|
||||
var point = {'x' : x, 'y' : y};
|
||||
|
||||
var contained = []
|
||||
|
||||
for (var k = 0; k < sets.length; ++k) {
|
||||
if (venn.distance(point, sets[k]) <= sets[k].radius) {
|
||||
contained.push(k);
|
||||
}
|
||||
}
|
||||
if (contained.length == 1) {
|
||||
var sum = sums[contained[0]];
|
||||
sum.x += point.x;
|
||||
sum.y += point.y;
|
||||
sum.count += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0; i < sets.length; ++i) {
|
||||
var sum = sums[i];
|
||||
if (sum.count) {
|
||||
sets[i].textCenter = { 'x' : sum.x / sum.count,
|
||||
'y' : sum.y / sum.count};
|
||||
} else {
|
||||
// no sampled points, possibly completely overlapped (or tiny)
|
||||
// use circle centre
|
||||
sets[i].textCenter = { 'x' : sets[i].x,
|
||||
'y' : sets[i].y};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
venn.drawD3Diagram = function(element, dataset, width, height, parameters) {
|
||||
parameters = parameters || {};
|
||||
|
||||
var colours = d3.scale.category10(),
|
||||
padding = ('padding' in parameters) ? parameters.padding : 6;
|
||||
|
||||
dataset = venn.scaleSolution(dataset, width, height, padding);
|
||||
computeTextCenters(dataset, width, height);
|
||||
|
||||
var svg = element.append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
var diagram = svg.append( "g" );
|
||||
|
||||
var nodes = diagram.append("g").selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("g");
|
||||
|
||||
var circles = nodes.append("circle")
|
||||
.attr("r", function(d) { return d.radius; })
|
||||
.style("fill-opacity", 0.3)
|
||||
.attr("cx", function(d) { return d.x; })
|
||||
.attr("cy", function(d) { return d.y; })
|
||||
.style("fill", function(d, i) { return colours(i); });
|
||||
|
||||
var text = nodes.append("text")
|
||||
.attr("dy", ".35em")
|
||||
.attr("x", function(d) { return Math.floor(d.textCenter.x); })
|
||||
.attr("y", function(d) { return Math.floor(d.textCenter.y); })
|
||||
.attr("text-anchor", "middle")
|
||||
.style("fill", function(d, i) { return colours(i); })
|
||||
.call(function (text) { text.each(wrapText); });
|
||||
|
||||
return {'svg' : svg,
|
||||
'nodes' : nodes,
|
||||
'circles' : circles,
|
||||
'text' : text };
|
||||
};
|
||||
|
||||
venn.updateD3Diagram = function(diagram, dataset, parameters) {
|
||||
parameters = parameters || {};
|
||||
var padding = ('padding' in parameters) ? parameters.padding : 6,
|
||||
duration = ('duration' in parameters) ? parameters.duration : 400;
|
||||
|
||||
var svg = diagram.svg,
|
||||
width = parseInt(svg.attr('width'), 10),
|
||||
height = parseInt(svg.attr('height'), 10);
|
||||
|
||||
dataset = venn.scaleSolution(dataset, width, height, padding);
|
||||
computeTextCenters(dataset, width, height);
|
||||
|
||||
var transition = diagram.nodes
|
||||
.data(dataset)
|
||||
.transition()
|
||||
.duration(duration);
|
||||
|
||||
transition.select("circle")
|
||||
.attr("cx", function(d) { return d.x; })
|
||||
.attr("cy", function(d) { return d.y; })
|
||||
.attr("r", function(d) { return d.radius; });
|
||||
|
||||
// transtitioning the text is a little tricky in the case
|
||||
// of wrapping. so lets basically transition unwrapped text
|
||||
// and at the end of the transition we'll wrap it again
|
||||
transition.select("text")
|
||||
.text(function (d) { return d.label; } )
|
||||
.each("end", wrapText)
|
||||
.attr("x", function(d) { return Math.floor(d.textCenter.x); })
|
||||
.attr("y", function(d) { return Math.floor(d.textCenter.y); });
|
||||
};
|
||||
|
||||
var SMALL = 1e-10;
|
||||
|
||||
/** Returns the intersection area of a bunch of circles (where each circle
|
||||
is an object having an x,y and radius property) */
|
||||
venn.intersectionArea = function(circles, stats) {
|
||||
// get all the intersection points of the circles
|
||||
var intersectionPoints = getIntersectionPoints(circles);
|
||||
|
||||
// filter out points that aren't included in all the circles
|
||||
var innerPoints = intersectionPoints.filter(function (p) {
|
||||
return venn.containedInCircles(p, circles);
|
||||
});
|
||||
|
||||
var arcArea = 0, polygonArea = 0, arcs = [], i;
|
||||
|
||||
// if we have intersection points that are within all the circles,
|
||||
// then figure out the area contained by them
|
||||
if (innerPoints.length > 1) {
|
||||
// sort the points by angle from the center of the polygon, which lets
|
||||
// us just iterate over points to get the edges
|
||||
var center = venn.getCenter(innerPoints);
|
||||
for (i = 0; i < innerPoints.length; ++i ) {
|
||||
var p = innerPoints[i];
|
||||
p.angle = Math.atan2(p.x - center.x, p.y - center.y);
|
||||
}
|
||||
innerPoints.sort(function(a,b) { return b.angle - a.angle;});
|
||||
|
||||
// iterate over all points, get arc between the points
|
||||
// and update the areas
|
||||
var p2 = innerPoints[innerPoints.length - 1];
|
||||
for (i = 0; i < innerPoints.length; ++i) {
|
||||
var p1 = innerPoints[i];
|
||||
|
||||
// polygon area updates easily ...
|
||||
polygonArea += (p2.x + p1.x) * (p1.y - p2.y);
|
||||
|
||||
// updating the arc area is a little more involved
|
||||
var midPoint = {x : (p1.x + p2.x) / 2,
|
||||
y : (p1.y + p2.y) / 2},
|
||||
arc = null;
|
||||
|
||||
for (var j = 0; j < p1.parentIndex.length; ++j) {
|
||||
if (p2.parentIndex.indexOf(p1.parentIndex[j]) > -1) {
|
||||
// figure out the angle halfway between the two points
|
||||
// on the current circle
|
||||
var circle = circles[p1.parentIndex[j]],
|
||||
a1 = Math.atan2(p1.x - circle.x, p1.y - circle.y),
|
||||
a2 = Math.atan2(p2.x - circle.x, p2.y - circle.y);
|
||||
|
||||
var angleDiff = (a2 - a1);
|
||||
if (angleDiff < 0) {
|
||||
angleDiff += 2*Math.PI;
|
||||
}
|
||||
|
||||
// and use that angle to figure out the width of the
|
||||
// arc
|
||||
var a = a2 - angleDiff/2,
|
||||
width = venn.distance(midPoint, {
|
||||
x : circle.x + circle.radius * Math.sin(a),
|
||||
y : circle.y + circle.radius * Math.cos(a)
|
||||
});
|
||||
|
||||
// pick the circle whose arc has the smallest width
|
||||
if ((arc === null) || (arc.width > width)) {
|
||||
arc = { circle : circle,
|
||||
width : width,
|
||||
p1 : p1,
|
||||
p2 : p2};
|
||||
}
|
||||
}
|
||||
}
|
||||
arcs.push(arc);
|
||||
arcArea += venn.circleArea(arc.circle.radius, arc.width);
|
||||
p2 = p1;
|
||||
}
|
||||
} else {
|
||||
// no intersection points, is either disjoint - or is completely
|
||||
// overlapped. figure out which by examining the smallest circle
|
||||
var smallest = circles[0];
|
||||
for (i = 1; i < circles.length; ++i) {
|
||||
if (circles[i].radius < smallest.radius) {
|
||||
smallest = circles[i];
|
||||
}
|
||||
}
|
||||
|
||||
// make sure the smallest circle is completely contained in all
|
||||
// the other circles
|
||||
var disjoint = false;
|
||||
for (i = 0; i < circles.length; ++i) {
|
||||
if (venn.distance(circles[i], smallest) > Math.abs(smallest.radius - circles[i].radius)) {
|
||||
disjoint = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (disjoint) {
|
||||
arcArea = polygonArea = 0;
|
||||
|
||||
} else {
|
||||
arcArea = smallest.radius * smallest.radius * Math.PI;
|
||||
arcs.push({circle : smallest,
|
||||
p1: { x: smallest.x, y : smallest.y + smallest.radius},
|
||||
p2: { x: smallest.x - SMALL, y : smallest.y + smallest.radius},
|
||||
width : smallest.radius * 2 });
|
||||
}
|
||||
}
|
||||
|
||||
polygonArea /= 2;
|
||||
if (stats) {
|
||||
stats.area = arcArea + polygonArea;
|
||||
stats.arcArea = arcArea;
|
||||
stats.polygonArea = polygonArea;
|
||||
stats.arcs = arcs;
|
||||
stats.innerPoints = innerPoints;
|
||||
stats.intersectionPoints = intersectionPoints;
|
||||
}
|
||||
|
||||
return arcArea + polygonArea;
|
||||
};
|
||||
|
||||
/** returns whether a point is contained by all of a list of circles */
|
||||
venn.containedInCircles = function(point, circles) {
|
||||
for (var i = 0; i < circles.length; ++i) {
|
||||
if (venn.distance(point, circles[i]) > circles[i].radius + SMALL) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
/** Gets all intersection points between a bunch of circles */
|
||||
function getIntersectionPoints(circles) {
|
||||
var ret = [];
|
||||
for (var i = 0; i < circles.length; ++i) {
|
||||
for (var j = i + 1; j < circles.length; ++j) {
|
||||
var intersect = venn.circleCircleIntersection(circles[i],
|
||||
circles[j]);
|
||||
for (var k = 0; k < intersect.length; ++k) {
|
||||
var p = intersect[k];
|
||||
p.parentIndex = [i,j];
|
||||
ret.push(p);
|
||||
}
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
venn.circleIntegral = function(r, x) {
|
||||
var y = Math.sqrt(r * r - x * x);
|
||||
return x * y + r * r * Math.atan2(x, y);
|
||||
};
|
||||
|
||||
/** Returns the area of a circle of radius r - up to width */
|
||||
venn.circleArea = function(r, width) {
|
||||
return venn.circleIntegral(r, width - r) - venn.circleIntegral(r, -r);
|
||||
};
|
||||
|
||||
|
||||
/** euclidean distance between two points */
|
||||
venn.distance = function(p1, p2) {
|
||||
return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) +
|
||||
(p1.y - p2.y) * (p1.y - p2.y));
|
||||
};
|
||||
|
||||
|
||||
/** Returns the overlap area of two circles of radius r1 and r2 - that
|
||||
have their centers separated by distance d. Simpler faster
|
||||
circle intersection for only two circles */
|
||||
venn.circleOverlap = function(r1, r2, d) {
|
||||
// no overlap
|
||||
if (d >= r1 + r2) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
// completely overlapped
|
||||
if (d <= Math.abs(r1 - r2)) {
|
||||
return Math.PI * Math.min(r1, r2) * Math.min(r1, r2);
|
||||
}
|
||||
|
||||
var w1 = r1 - (d * d - r2 * r2 + r1 * r1) / (2 * d),
|
||||
w2 = r2 - (d * d - r1 * r1 + r2 * r2) / (2 * d);
|
||||
return venn.circleArea(r1, w1) + venn.circleArea(r2, w2);
|
||||
};
|
||||
|
||||
|
||||
/** Given two circles (containing a x/y/radius attributes),
|
||||
returns the intersecting points if possible.
|
||||
note: doesn't handle cases where there are infinitely many
|
||||
intersection points (circles are equivalent):, or only one intersection point*/
|
||||
venn.circleCircleIntersection = function(p1, p2) {
|
||||
var d = venn.distance(p1, p2),
|
||||
r1 = p1.radius,
|
||||
r2 = p2.radius;
|
||||
|
||||
// if to far away, or self contained - can't be done
|
||||
if ((d >= (r1 + r2)) || (d <= Math.abs(r1 - r2))) {
|
||||
return [];
|
||||
}
|
||||
|
||||
var a = (r1 * r1 - r2 * r2 + d * d) / (2 * d),
|
||||
h = Math.sqrt(r1 * r1 - a * a),
|
||||
x0 = p1.x + a * (p2.x - p1.x) / d,
|
||||
y0 = p1.y + a * (p2.y - p1.y) / d,
|
||||
rx = -(p2.y - p1.y) * (h / d),
|
||||
ry = -(p2.x - p1.x) * (h / d);
|
||||
|
||||
return [{ x: x0 + rx, y : y0 - ry },
|
||||
{ x: x0 - rx, y : y0 + ry }];
|
||||
};
|
||||
|
||||
/** Returns the center of a bunch of points */
|
||||
venn.getCenter = function(points) {
|
||||
var center = { x: 0, y: 0};
|
||||
for (var i =0; i < points.length; ++i ) {
|
||||
center.x += points[i].x;
|
||||
center.y += points[i].y;
|
||||
}
|
||||
center.x /= points.length;
|
||||
center.y /= points.length;
|
||||
return center;
|
||||
};
|
||||
}(window.venn = window.venn || {}));
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
define("echarts/chart/heatmap",["require","./base","../layer/heatmap","../config","../util/ecData","zrender/tool/util","zrender/tool/color","zrender/shape/Image","../chart"],function(e){function t(e,t,n,a,o){i.call(this,e,t,n,a,o),this.refresh(a)}var i=e("./base"),n=e("../layer/heatmap"),a=e("../config"),o=(e("../util/ecData"),e("zrender/tool/util")),r=(e("zrender/tool/color"),e("zrender/shape/Image"));return a.heatmap={zlevel:0,z:2,clickable:!0},t.prototype={type:a.CHART_TYPE_HEATMAP,refresh:function(e){this.clear(),e&&(this.option=e,this.series=e.series),this._init()},_init:function(){var e=this.series;this.backupShapeList();for(var t=e.length,i=0;t>i;++i)if(e[i].type===a.CHART_TYPE_HEATMAP){e[i]=this.reformOption(e[i]);var o=new n(e[i]),s=o.getCanvas(e[i].data,this.zr.getWidth(),this.zr.getHeight()),l=new r({position:[0,0],scale:[1,1],hoverable:this.option.hoverable,style:{x:0,y:0,image:s,width:s.width,height:s.height}});this.shapeList.push(l)}this.addShapeList()}},o.inherits(t,i),e("../chart").define("heatmap",t),t}),define("echarts/layer/heatmap",["require"],function(){function e(e){if(this.option=e,e)for(var i in t)this.option[i]=void 0!==e[i]?e[i]:t[i];else this.option=t}var t={blurSize:30,gradientColors:["blue","cyan","lime","yellow","red"],minAlpha:.05,valueScale:1,opacity:1},i=20,n=256;return e.prototype={getCanvas:function(e,t,a){var o=this._getBrush(),r=this._getGradient(),s=i+this.option.blurSize,l=document.createElement("canvas");l.width=t,l.height=a;for(var h=l.getContext("2d"),m=e.length,V=0;m>V;++V){var d=e[V],U=d[0],p=d[1],c=d[2],u=Math.min(1,Math.max(c*this.option.valueScale||this.option.minAlpha,this.option.minAlpha));h.globalAlpha=u,h.drawImage(o,U-s,p-s)}for(var g=h.getImageData(0,0,l.width,l.height),y=g.data,m=y.length/4;m--;){var b=4*m+3,u=y[b]/256,f=Math.floor(u*(n-1));y[b-3]=r[4*f],y[b-2]=r[4*f+1],y[b-1]=r[4*f+2],y[b]*=this.option.opacity}return h.putImageData(g,0,0),l},_getBrush:function(){if(!this._brushCanvas){this._brushCanvas=document.createElement("canvas");var e=i+this.option.blurSize,t=2*e;this._brushCanvas.width=t,this._brushCanvas.height=t;var n=this._brushCanvas.getContext("2d");n.shadowOffsetX=t,n.shadowBlur=this.option.blurSize,n.shadowColor="black",n.beginPath(),n.arc(-e,e,i,0,2*Math.PI,!0),n.closePath(),n.fill()}return this._brushCanvas},_getGradient:function(){if(!this._gradientPixels){var e=n,t=document.createElement("canvas");t.width=1,t.height=e;for(var i=t.getContext("2d"),a=i.createLinearGradient(0,0,0,e),o=this.option.gradientColors.length,r=0;o>r;++r)"string"==typeof this.option.gradientColors[r]?a.addColorStop((r+1)/o,this.option.gradientColors[r]):a.addColorStop(this.option.gradientColors[r].offset,this.option.gradientColors[r].color);i.fillStyle=a,i.fillRect(0,0,1,e),this._gradientPixels=i.getImageData(0,0,1,e).data}return this._gradientPixels}},e}),define("echarts/layer/heatmap",["require"],function(){function e(e){if(this.option=e,e)for(var i in t)this.option[i]=void 0!==e[i]?e[i]:t[i];else this.option=t}var t={blurSize:30,gradientColors:["blue","cyan","lime","yellow","red"],minAlpha:.05,valueScale:1,opacity:1},i=20,n=256;return e.prototype={getCanvas:function(e,t,a){var o=this._getBrush(),r=this._getGradient(),s=i+this.option.blurSize,l=document.createElement("canvas");l.width=t,l.height=a;for(var h=l.getContext("2d"),m=e.length,V=0;m>V;++V){var d=e[V],U=d[0],p=d[1],c=d[2],u=Math.min(1,Math.max(c*this.option.valueScale||this.option.minAlpha,this.option.minAlpha));h.globalAlpha=u,h.drawImage(o,U-s,p-s)}for(var g=h.getImageData(0,0,l.width,l.height),y=g.data,m=y.length/4;m--;){var b=4*m+3,u=y[b]/256,f=Math.floor(u*(n-1));y[b-3]=r[4*f],y[b-2]=r[4*f+1],y[b-1]=r[4*f+2],y[b]*=this.option.opacity}return h.putImageData(g,0,0),l},_getBrush:function(){if(!this._brushCanvas){this._brushCanvas=document.createElement("canvas");var e=i+this.option.blurSize,t=2*e;this._brushCanvas.width=t,this._brushCanvas.height=t;var n=this._brushCanvas.getContext("2d");n.shadowOffsetX=t,n.shadowBlur=this.option.blurSize,n.shadowColor="black",n.beginPath(),n.arc(-e,e,i,0,2*Math.PI,!0),n.closePath(),n.fill()}return this._brushCanvas},_getGradient:function(){if(!this._gradientPixels){var e=n,t=document.createElement("canvas");t.width=1,t.height=e;for(var i=t.getContext("2d"),a=i.createLinearGradient(0,0,0,e),o=this.option.gradientColors.length,r=0;o>r;++r)"string"==typeof this.option.gradientColors[r]?a.addColorStop((r+1)/o,this.option.gradientColors[r]):a.addColorStop(this.option.gradientColors[r].offset,this.option.gradientColors[r].color);i.fillStyle=a,i.fillRect(0,0,1,e),this._gradientPixels=i.getImageData(0,0,1,e).data}return this._gradientPixels}},e});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,316 @@
|
||||
define(function() {
|
||||
|
||||
var theme10 = {
|
||||
// 默认色板
|
||||
color: [
|
||||
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
|
||||
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
|
||||
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
|
||||
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
|
||||
],
|
||||
|
||||
// 图表标题
|
||||
title: {
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 17,
|
||||
color: '#008acd' // 主标题文字颜色
|
||||
}
|
||||
},
|
||||
|
||||
// 值域
|
||||
dataRange: {
|
||||
itemWidth: 15,
|
||||
color: ['#5ab1ef','#e0ffff']
|
||||
},
|
||||
|
||||
// Tools
|
||||
toolbox: {
|
||||
/*
|
||||
color : ['#000000', '#1e90ff', '#1e90ff', '#1e90ff'],
|
||||
effectiveColor : '#ff4500',
|
||||
feature : {
|
||||
mark : {
|
||||
title : {
|
||||
mark : 'Markline switch',
|
||||
markUndo : 'Undo markline',
|
||||
markClear : 'Clear markline'
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
},
|
||||
|
||||
|
||||
animationDuration: 1000,
|
||||
|
||||
legend: {
|
||||
itemGap: 15
|
||||
},
|
||||
|
||||
// 提示框
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0,0,0,0.8)', // 提示背景颜色，默认为透明度为0.7的黑色
|
||||
padding: [8, 12, 8, 12],
|
||||
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
||||
type : 'line', // 默认为直线，可选为：'line' | 'shadow'
|
||||
lineStyle : { // 直线指示器样式设置
|
||||
color: '#607D8B',
|
||||
width: 1
|
||||
},
|
||||
crossStyle: {
|
||||
color: '#607D8B'
|
||||
},
|
||||
shadowStyle : { // 阴影指示器样式设置
|
||||
color: 'rgba(200,200,200,0.2)'
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
fontFamily: 'Roboto, sans-serif'
|
||||
}
|
||||
},
|
||||
|
||||
// 区域缩放控制器
|
||||
dataZoom: {
|
||||
dataBackgroundColor: '#eceff1',
|
||||
fillerColor: 'rgba(96,125,139,0.1)', // 填充颜色
|
||||
handleColor: '#607D8B',
|
||||
handleSize: 10
|
||||
},
|
||||
|
||||
// 网格
|
||||
grid: {
|
||||
borderColor: '#eee'
|
||||
},
|
||||
|
||||
// 类目轴
|
||||
categoryAxis: {
|
||||
axisLine: { // 坐标轴线
|
||||
lineStyle: { // 属性lineStyle控制线条样式
|
||||
color: '#999',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
splitLine: { // 分隔线
|
||||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||||
color: ['#eee']
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
fontFamily: 'Roboto, sans-serif'
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: 'Roboto, sans-serif'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 数值型坐标轴默认参数
|
||||
valueAxis: {
|
||||
axisLine: { // 坐标轴线
|
||||
lineStyle: { // 属性lineStyle控制线条样式
|
||||
color: '#999',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
splitArea : {
|
||||
show : true,
|
||||
areaStyle : {
|
||||
color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
|
||||
}
|
||||
},
|
||||
splitLine: { // 分隔线
|
||||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||||
color: ['#eee']
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
fontFamily: 'Roboto, sans-serif'
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: 'Roboto, sans-serif'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
polar : {
|
||||
axisLine: { // 坐标轴线
|
||||
lineStyle: { // 属性lineStyle控制线条样式
|
||||
color: '#ddd'
|
||||
}
|
||||
},
|
||||
splitArea : {
|
||||
show : true,
|
||||
areaStyle : {
|
||||
color: ['rgba(250,250,250,0.2)','rgba(200,200,200,0.2)']
|
||||
}
|
||||
},
|
||||
splitLine : {
|
||||
lineStyle : {
|
||||
color : '#ddd'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
timeline : {
|
||||
lineStyle : {
|
||||
color : '#008acd'
|
||||
},
|
||||
controlStyle : {
|
||||
normal : { color : '#008acd'},
|
||||
emphasis : { color : '#008acd'}
|
||||
},
|
||||
symbol : 'emptyCircle',
|
||||
symbolSize : 3
|
||||
},
|
||||
|
||||
// 柱形图默认参数
|
||||
bar: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0
|
||||
},
|
||||
emphasis: {
|
||||
barBorderRadius: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Pies
|
||||
pie: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#fff'
|
||||
},
|
||||
emphasis: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Default line
|
||||
line: {
|
||||
smooth : true,
|
||||
symbol: 'emptyCircle', // Symbol type
|
||||
symbolSize: 3 // Circle dot size
|
||||
},
|
||||
|
||||
// K线图默认参数
|
||||
k: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#d87a80', // 阳线填充颜色
|
||||
color0: '#2ec7c9', // 阴线填充颜色
|
||||
lineStyle: {
|
||||
color: '#d87a80', // 阳线边框颜色
|
||||
color0: '#2ec7c9' // 阴线边框颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 散点图默认参数
|
||||
scatter: {
|
||||
symbol: 'circle', // 图形类型
|
||||
symbolSize: 4 // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
|
||||
},
|
||||
|
||||
// 雷达图默认参数
|
||||
radar : {
|
||||
symbol: 'emptyCircle', // 图形类型
|
||||
symbolSize:3
|
||||
//symbol: null, // 拐点图形类型
|
||||
//symbolRotate : null, // 图形旋转控制
|
||||
},
|
||||
|
||||
map: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {
|
||||
color: '#ddd'
|
||||
},
|
||||
label: {
|
||||
textStyle: {
|
||||
color: '#d87a80'
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: { // 也是选中样式
|
||||
areaStyle: {
|
||||
color: '#fe994e'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
force : {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
linkStyle : {
|
||||
color : '#1e90ff'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
chord : {
|
||||
itemStyle : {
|
||||
normal : {
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(128, 128, 128, 0.5)',
|
||||
chordStyle : {
|
||||
lineStyle : {
|
||||
color : 'rgba(128, 128, 128, 0.5)'
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis : {
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(128, 128, 128, 0.5)',
|
||||
chordStyle : {
|
||||
lineStyle : {
|
||||
color : 'rgba(128, 128, 128, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
gauge : {
|
||||
axisLine: { // 坐标轴线
|
||||
lineStyle: { // 属性lineStyle控制线条样式
|
||||
color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
|
||||
width: 10
|
||||
}
|
||||
},
|
||||
axisTick: { // 坐标轴小标记
|
||||
splitNumber: 10, // 每份split细分多少段
|
||||
length :15, // 属性length控制线长
|
||||
lineStyle: { // 属性lineStyle控制线条样式
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
splitLine: { // 分隔线
|
||||
length :22, // 属性length控制线长
|
||||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
pointer : {
|
||||
width : 5
|
||||
}
|
||||
},
|
||||
|
||||
textStyle: {
|
||||
fontFamily: 'Roboto, Arial, Verdana, sans-serif'
|
||||
}
|
||||
};
|
||||
|
||||
return theme10;
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user