|
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ |
|
var helper = require('./legend'); |
|
|
|
module.exports = function(){ |
|
|
|
var scale = d3.scale.linear(), |
|
shape = "rect", |
|
shapeWidth = 15, |
|
shapeHeight = 15, |
|
shapeRadius = 10, |
|
shapePadding = 2, |
|
cells = [5], |
|
labels = [], |
|
useClass = false, |
|
labelFormat = d3.format(".01f"), |
|
labelOffset = 10, |
|
labelAlign = "middle", |
|
labelDelimiter = "to", |
|
orient = "vertical", |
|
ascending = false, |
|
path, |
|
legendDispatcher = d3.dispatch("cellover", "cellout", "cellclick"); |
|
|
|
function legend(svg){ |
|
|
|
var type = helper.d3_calcType(scale, ascending, cells, labels, labelFormat, labelDelimiter); |
|
|
|
var cell = svg.selectAll(".cell").data(type.data), |
|
cellEnter = cell.enter().append("g", ".cell").attr("class", "cell").style("opacity", 1e-6); |
|
shapeEnter = cellEnter.append(shape).attr("class", "swatch"), |
|
shapes = cell.select("g.cell " + shape); |
|
|
|
//add event handlers |
|
helper.d3_addEvents(cellEnter, legendDispatcher); |
|
|
|
cell.exit().transition().style("opacity", 0).remove(); |
|
|
|
helper.d3_drawShapes(shape, shapes, shapeHeight, shapeWidth, shapeRadius, path); |
|
|
|
helper.d3_addText(svg, cellEnter, type.labels) |
|
|
|
// sets placement |
|
var text = cell.select("text"), |
|
shapeSize = shapes[0].map( function(d){ return d.getBBox(); }); |
|
|
|
//sets scale |
|
//everything is fill except for line which is stroke, |
|
if (!useClass){ |
|
if (shape == "line"){ |
|
shapes.style("stroke", type.feature); |
|
} else { |
|
shapes.style("fill", type.feature); |
|
} |
|
} else { |
|
shapes.attr("class", function(d){ return "swatch " + type.feature(d); }); |
|
} |
|
|
|
var cellTrans, |
|
textTrans, |
|
textAlign = (labelAlign == "start") ? 0 : (labelAlign == "middle") ? 0.5 : 1; |
|
|
|
//positions cells and text |
|
if (orient === "vertical"){ |
|
cellTrans = function(d,i) { return "translate(0, " + (i * (shapeSize[i].height + shapePadding)) + ")"; }; |
|
textTrans = function(d,i) { return "translate(" + (shapeSize[i].width + shapeSize[i].x + |
|
labelOffset) + "," + (shapeSize[i].y + shapeSize[i].height/2 + 5) + ")"; }; |
|
|
|
} else if (orient === "horizontal"){ |
|
cellTrans = function(d,i) { return "translate(" + (i * (shapeSize[i].width + shapePadding)) + ",0)"; } |
|
textTrans = function(d,i) { return "translate(" + (shapeSize[i].width*textAlign + shapeSize[i].x) + |
|
"," + (shapeSize[i].height + shapeSize[i].y + labelOffset + 8) + ")"; }; |
|
} |
|
|
|
helper.d3_placement(orient, cell, cellTrans, text, textTrans, labelAlign); |
|
cell.transition().style("opacity", 1); |
|
|
|
} |
|
|
|
|
|
|
|
legend.scale = function(_) { |
|
if (!arguments.length) return legend; |
|
scale = _; |
|
return legend; |
|
}; |
|
|
|
legend.cells = function(_) { |
|
if (!arguments.length) return legend; |
|
if (_.length > 1 || _ >= 2 ){ |
|
cells = _; |
|
} |
|
return legend; |
|
}; |
|
|
|
legend.shape = function(_, d) { |
|
if (!arguments.length) return legend; |
|
if (_ == "rect" || _ == "circle" || _ == "line" || (_ == "path" && (typeof d === 'string')) ){ |
|
shape = _; |
|
path = d; |
|
} |
|
return legend; |
|
}; |
|
|
|
legend.shapeWidth = function(_) { |
|
if (!arguments.length) return legend; |
|
shapeWidth = +_; |
|
return legend; |
|
}; |
|
|
|
legend.shapeHeight = function(_) { |
|
if (!arguments.length) return legend; |
|
shapeHeight = +_; |
|
return legend; |
|
}; |
|
|
|
legend.shapeRadius = function(_) { |
|
if (!arguments.length) return legend; |
|
shapeRadius = +_; |
|
return legend; |
|
}; |
|
|
|
legend.shapePadding = function(_) { |
|
if (!arguments.length) return legend; |
|
shapePadding = +_; |
|
return legend; |
|
}; |
|
|
|
legend.labels = function(_) { |
|
if (!arguments.length) return legend; |
|
labels = _; |
|
return legend; |
|
}; |
|
|
|
legend.labelAlign = function(_) { |
|
if (!arguments.length) return legend; |
|
if (_ == "start" || _ == "end" || _ == "middle") { |
|
labelAlign = _; |
|
} |
|
return legend; |
|
}; |
|
|
|
legend.labelFormat = function(_) { |
|
if (!arguments.length) return legend; |
|
labelFormat = _; |
|
return legend; |
|
}; |
|
|
|
legend.labelOffset = function(_) { |
|
if (!arguments.length) return legend; |
|
labelOffset = +_; |
|
return legend; |
|
}; |
|
|
|
legend.labelDelimiter = function(_) { |
|
if (!arguments.length) return legend; |
|
labelDelimiter = _; |
|
return legend; |
|
}; |
|
|
|
legend.useClass = function(_) { |
|
if (!arguments.length) return legend; |
|
if (_ === true || _ === false){ |
|
useClass = _; |
|
} |
|
return legend; |
|
}; |
|
|
|
legend.orient = function(_){ |
|
if (!arguments.length) return legend; |
|
_ = _.toLowerCase(); |
|
if (_ == "horizontal" || _ == "vertical") { |
|
orient = _; |
|
} |
|
return legend; |
|
}; |
|
|
|
legend.ascending = function(_) { |
|
if (!arguments.length) return legend; |
|
ascending = !!_; |
|
return legend; |
|
}; |
|
|
|
d3.rebind(legend, legendDispatcher, "on"); |
|
|
|
return legend; |
|
|
|
}; |
|
|
|
|
|
},{"./legend":2}],2:[function(require,module,exports){ |
|
module.exports = { |
|
|
|
d3_identity: function (d) { |
|
return d; |
|
}, |
|
|
|
d3_mergeLabels: function (gen, labels) { |
|
|
|
if(labels.length === 0) return gen; |
|
|
|
gen = (gen) ? gen : []; |
|
|
|
var i = labels.length; |
|
for (; i < gen.length; i++) { |
|
labels.push(gen[i]); |
|
} |
|
return labels; |
|
}, |
|
|
|
d3_linearLegend: function (scale, cells, labelFormat) { |
|
var data = []; |
|
|
|
if (cells.length > 1){ |
|
data = cells; |
|
|
|
} else { |
|
var domain = scale.domain(), |
|
increment = (domain[domain.length - 1] - domain[0])/(cells - 1), |
|
i = 0; |
|
|
|
for (; i < cells; i++){ |
|
data.push(domain[0] + i*increment); |
|
} |
|
} |
|
|
|
var labels = data.map(labelFormat); |
|
|
|
return {data: data, |
|
labels: labels, |
|
feature: function(d){ return scale(d); }}; |
|
}, |
|
|
|
d3_quantLegend: function (scale, labelFormat, labelDelimiter) { |
|
var labels = scale.range().map(function(d){ |
|
var invert = scale.invertExtent(d), |
|
a = labelFormat(invert[0]), |
|
b = labelFormat(invert[1]); |
|
|
|
// if (( (a) && (a.isNan()) && b){ |
|
// console.log("in initial statement") |
|
return labelFormat(invert[0]) + " " + labelDelimiter + " " + labelFormat(invert[1]); |
|
// } else if (a || b) { |
|
// console.log('in else statement') |
|
// return (a) ? a : b; |
|
// } |
|
|
|
}); |
|
|
|
return {data: scale.range(), |
|
labels: labels, |
|
feature: this.d3_identity |
|
}; |
|
}, |
|
|
|
d3_ordinalLegend: function (scale) { |
|
return {data: scale.domain(), |
|
labels: scale.domain(), |
|
feature: function(d){ return scale(d); }}; |
|
}, |
|
|
|
d3_drawShapes: function (shape, shapes, shapeHeight, shapeWidth, shapeRadius, path) { |
|
if (shape === "rect"){ |
|
shapes.attr("height", shapeHeight).attr("width", shapeWidth); |
|
|
|
} else if (shape === "circle") { |
|
shapes.attr("r", shapeRadius)//.attr("cx", shapeRadius).attr("cy", shapeRadius); |
|
|
|
} else if (shape === "line") { |
|
shapes.attr("x1", 0).attr("x2", shapeWidth).attr("y1", 0).attr("y2", 0); |
|
|
|
} else if (shape === "path") { |
|
shapes.attr("d", path); |
|
} |
|
}, |
|
|
|
d3_addText: function (svg, enter, labels){ |
|
enter.append("text").attr("class", "label"); |
|
svg.selectAll("g.cell text").data(labels).text(this.d3_identity); |
|
}, |
|
|
|
d3_calcType: function (scale, ascending, cells, labels, labelFormat, labelDelimiter){ |
|
var type = scale.ticks ? |
|
this.d3_linearLegend(scale, cells, labelFormat) : scale.invertExtent ? |
|
this.d3_quantLegend(scale, labelFormat, labelDelimiter) : this.d3_ordinalLegend(scale); |
|
|
|
type.labels = this.d3_mergeLabels(type.labels, labels); |
|
|
|
if (ascending) { |
|
type.labels = this.d3_reverse(type.labels); |
|
type.data = this.d3_reverse(type.data); |
|
} |
|
|
|
return type; |
|
}, |
|
|
|
d3_reverse: function(arr) { |
|
var mirror = []; |
|
for (var i = 0, l = arr.length; i < l; i++) { |
|
mirror[i] = arr[l-i-1]; |
|
} |
|
return mirror; |
|
}, |
|
|
|
d3_placement: function (orient, cell, cellTrans, text, textTrans, labelAlign) { |
|
cell.attr("transform", cellTrans); |
|
text.attr("transform", textTrans); |
|
if (orient === "horizontal"){ |
|
text.style("text-anchor", labelAlign); |
|
} |
|
}, |
|
|
|
d3_addEvents: function(cells, dispatcher){ |
|
var _ = this; |
|
|
|
cells.on("mouseover.legend", function (d) { _.d3_cellOver(dispatcher, d, this); }) |
|
.on("mouseout.legend", function (d) { _.d3_cellOut(dispatcher, d, this); }) |
|
.on("click.legend", function (d) { _.d3_cellClick(dispatcher, d, this); }); |
|
}, |
|
|
|
d3_cellOver: function(cellDispatcher, d, obj){ |
|
cellDispatcher.cellover.call(obj, d); |
|
}, |
|
|
|
d3_cellOut: function(cellDispatcher, d, obj){ |
|
cellDispatcher.cellout.call(obj, d); |
|
}, |
|
|
|
d3_cellClick: function(cellDispatcher, d, obj){ |
|
cellDispatcher.cellclick.call(obj, d); |
|
} |
|
|
|
} |
|
|
|
},{}],3:[function(require,module,exports){ |
|
var helper = require('./legend'); |
|
|
|
module.exports = function(){ |
|
|
|
var scale = d3.scale.linear(), |
|
shape = "rect", |
|
shapeWidth = 15, |
|
shapePadding = 2, |
|
cells = [5], |
|
labels = [], |
|
useStroke = false, |
|
labelFormat = d3.format(".01f"), |
|
labelOffset = 10, |
|
labelAlign = "middle", |
|
labelDelimiter = "to", |
|
orient = "vertical", |
|
ascending = false, |
|
path, |
|
legendDispatcher = d3.dispatch("cellover", "cellout", "cellclick"); |
|
|
|
function legend(svg){ |
|
|
|
var type = helper.d3_calcType(scale, ascending, cells, labels, labelFormat, labelDelimiter); |
|
|
|
var cell = svg.selectAll(".cell").data(type.data), |
|
cellEnter = cell.enter().append("g", ".cell").attr("class", "cell").style("opacity", 1e-6); |
|
shapeEnter = cellEnter.append(shape).attr("class", "swatch"), |
|
shapes = cell.select("g.cell " + shape); |
|
|
|
//add event handlers |
|
helper.d3_addEvents(cellEnter, legendDispatcher); |
|
|
|
cell.exit().transition().style("opacity", 0).remove(); |
|
|
|
//creates shape |
|
if (shape === "line"){ |
|
helper.d3_drawShapes(shape, shapes, 0, shapeWidth); |
|
shapes.attr("stroke-width", type.feature); |
|
} else { |
|
helper.d3_drawShapes(shape, shapes, type.feature, type.feature, type.feature, path); |
|
} |
|
|
|
helper.d3_addText(svg, cellEnter, type.labels) |
|
|
|
//sets placement |
|
var text = cell.select("text"), |
|
shapeSize = shapes[0].map( |
|
function(d, i){ |
|
var bbox = d.getBBox() |
|
var stroke = scale(type.data[i]); |
|
|
|
if (shape === "line" && orient === "horizontal") { |
|
bbox.height = bbox.height + stroke; |
|
} else if (shape === "line" && orient === "vertical"){ |
|
bbox.width = bbox.width; |
|
} |
|
|
|
return bbox; |
|
}); |
|
|
|
var maxH = d3.max(shapeSize, function(d){ return d.height + d.y; }), |
|
maxW = d3.max(shapeSize, function(d){ return d.width + d.x; }); |
|
|
|
var cellTrans, |
|
textTrans, |
|
textAlign = (labelAlign == "start") ? 0 : (labelAlign == "middle") ? 0.5 : 1; |
|
|
|
//positions cells and text |
|
if (orient === "vertical"){ |
|
|
|
cellTrans = function(d,i) { |
|
var height = d3.sum(shapeSize.slice(0, i + 1 ), function(d){ return d.height; }); |
|
return "translate(0, " + (height + i*shapePadding) + ")"; }; |
|
|
|
textTrans = function(d,i) { return "translate(" + (maxW + labelOffset) + "," + |
|
(shapeSize[i].y + shapeSize[i].height/2 + 5) + ")"; }; |
|
|
|
} else if (orient === "horizontal"){ |
|
cellTrans = function(d,i) { |
|
var width = d3.sum(shapeSize.slice(0, i + 1 ), function(d){ return d.width; }); |
|
return "translate(" + (width + i*shapePadding) + ",0)"; }; |
|
|
|
textTrans = function(d,i) { return "translate(" + (shapeSize[i].width*textAlign + shapeSize[i].x) + "," + |
|
(maxH + labelOffset ) + ")"; }; |
|
} |
|
|
|
helper.d3_placement(orient, cell, cellTrans, text, textTrans, labelAlign); |
|
cell.transition().style("opacity", 1); |
|
|
|
} |
|
|
|
|
|
|
|
legend.scale = function(_) { |
|
if (!arguments.length) return legend; |
|
scale = _; |
|
return legend; |
|
}; |
|
|
|
legend.cells = function(_) { |
|
if (!arguments.length) return legend; |
|
if (_.length > 1 || _ >= 2 ){ |
|
cells = _; |
|
} |
|
return legend; |
|
}; |
|
|
|
|
|
legend.shape = function(_, d) { |
|
if (!arguments.length) return legend; |
|
if (_ == "rect" || _ == "circle" || _ == "line" ){ |
|
shape = _; |
|
path = d; |
|
} |
|
return legend; |
|
}; |
|
|
|
legend.shapeWidth = function(_) { |
|
if (!arguments.length) return legend; |
|
shapeWidth = +_; |
|
return legend; |
|
}; |
|
|
|
legend.shapePadding = function(_) { |
|
if (!arguments.length) return legend; |
|
shapePadding = +_; |
|
return legend; |
|
}; |
|
|
|
legend.labels = function(_) { |
|
if (!arguments.length) return legend; |
|
labels = _; |
|
return legend; |
|
}; |
|
|
|
legend.labelAlign = function(_) { |
|
if (!arguments.length) return legend; |
|
if (_ == "start" || _ == "end" || _ == "middle") { |
|
labelAlign = _; |
|
} |
|
return legend; |
|
}; |
|
|
|
legend.labelFormat = function(_) { |
|
if (!arguments.length) return legend; |
|
labelFormat = _; |
|
return legend; |
|
}; |
|
|
|
legend.labelOffset = function(_) { |
|
if (!arguments.length) return legend; |
|
labelOffset = +_; |
|
return legend; |
|
}; |
|
|
|
legend.labelDelimiter = function(_) { |
|
if (!arguments.length) return legend; |
|
labelDelimiter = _; |
|
return legend; |
|
}; |
|
|
|
legend.orient = function(_){ |
|
if (!arguments.length) return legend; |
|
_ = _.toLowerCase(); |
|
if (_ == "horizontal" || _ == "vertical") { |
|
orient = _; |
|
} |
|
return legend; |
|
}; |
|
|
|
legend.ascending = function(_) { |
|
if (!arguments.length) return legend; |
|
ascending = !!_; |
|
return legend; |
|
}; |
|
|
|
d3.rebind(legend, legendDispatcher, "on"); |
|
|
|
return legend; |
|
|
|
}; |
|
|
|
|
|
},{"./legend":2}],4:[function(require,module,exports){ |
|
var helper = require('./legend'); |
|
|
|
module.exports = function(){ |
|
|
|
var scale = d3.scale.linear(), |
|
shape = "path", |
|
shapeWidth = 15, |
|
shapeHeight = 15, |
|
shapeRadius = 10, |
|
shapePadding = 5, |
|
cells = [5], |
|
labels = [], |
|
useClass = false, |
|
labelFormat = d3.format(".01f"), |
|
labelAlign = "middle", |
|
labelOffset = 10, |
|
labelDelimiter = "to", |
|
orient = "vertical", |
|
ascending = false, |
|
legendDispatcher = d3.dispatch("cellover", "cellout", "cellclick"); |
|
|
|
function legend(svg){ |
|
|
|
var type = helper.d3_calcType(scale, ascending, cells, labels, labelFormat, labelDelimiter); |
|
|
|
var cell = svg.selectAll(".cell").data(type.data), |
|
cellEnter = cell.enter().append("g", ".cell").attr("class", "cell").style("opacity", 1e-6); |
|
shapeEnter = cellEnter.append(shape).attr("class", "swatch"), |
|
shapes = cell.select("g.cell " + shape); |
|
|
|
//add event handlers |
|
helper.d3_addEvents(cellEnter, legendDispatcher); |
|
|
|
//remove old shapes |
|
cell.exit().transition().style("opacity", 0).remove(); |
|
|
|
helper.d3_drawShapes(shape, shapes, shapeHeight, shapeWidth, shapeRadius, type.feature); |
|
helper.d3_addText(svg, cellEnter, type.labels) |
|
|
|
// sets placement |
|
var text = cell.select("text"), |
|
shapeSize = shapes[0].map( function(d){ return d.getBBox(); }); |
|
|
|
var maxH = d3.max(shapeSize, function(d){ return d.height; }), |
|
maxW = d3.max(shapeSize, function(d){ return d.width; }); |
|
|
|
var cellTrans, |
|
textTrans, |
|
textAlign = (labelAlign == "start") ? 0 : (labelAlign == "middle") ? 0.5 : 1; |
|
|
|
//positions cells and text |
|
if (orient === "vertical"){ |
|
cellTrans = function(d,i) { return "translate(0, " + (i * (maxH + shapePadding)) + ")"; }; |
|
textTrans = function(d,i) { return "translate(" + (maxW + labelOffset) + "," + |
|
(shapeSize[i].y + shapeSize[i].height/2 + 5) + ")"; }; |
|
|
|
} else if (orient === "horizontal"){ |
|
cellTrans = function(d,i) { return "translate(" + (i * (maxW + shapePadding)) + ",0)"; }; |
|
textTrans = function(d,i) { return "translate(" + (shapeSize[i].width*textAlign + shapeSize[i].x) + "," + |
|
(maxH + labelOffset ) + ")"; }; |
|
} |
|
|
|
helper.d3_placement(orient, cell, cellTrans, text, textTrans, labelAlign); |
|
cell.transition().style("opacity", 1); |
|
|
|
} |
|
|
|
|
|
legend.scale = function(_) { |
|
if (!arguments.length) return legend; |
|
scale = _; |
|
return legend; |
|
}; |
|
|
|
legend.cells = function(_) { |
|
if (!arguments.length) return legend; |
|
if (_.length > 1 || _ >= 2 ){ |
|
cells = _; |
|
} |
|
return legend; |
|
}; |
|
|
|
legend.shapePadding = function(_) { |
|
if (!arguments.length) return legend; |
|
shapePadding = +_; |
|
return legend; |
|
}; |
|
|
|
legend.labels = function(_) { |
|
if (!arguments.length) return legend; |
|
labels = _; |
|
return legend; |
|
}; |
|
|
|
legend.labelAlign = function(_) { |
|
if (!arguments.length) return legend; |
|
if (_ == "start" || _ == "end" || _ == "middle") { |
|
labelAlign = _; |
|
} |
|
return legend; |
|
}; |
|
|
|
legend.labelFormat = function(_) { |
|
if (!arguments.length) return legend; |
|
labelFormat = _; |
|
return legend; |
|
}; |
|
|
|
legend.labelOffset = function(_) { |
|
if (!arguments.length) return legend; |
|
labelOffset = +_; |
|
return legend; |
|
}; |
|
|
|
legend.labelDelimiter = function(_) { |
|
if (!arguments.length) return legend; |
|
labelDelimiter = _; |
|
return legend; |
|
}; |
|
|
|
legend.orient = function(_){ |
|
if (!arguments.length) return legend; |
|
_ = _.toLowerCase(); |
|
if (_ == "horizontal" || _ == "vertical") { |
|
orient = _; |
|
} |
|
return legend; |
|
}; |
|
|
|
legend.ascending = function(_) { |
|
if (!arguments.length) return legend; |
|
ascending = !!_; |
|
return legend; |
|
}; |
|
|
|
d3.rebind(legend, legendDispatcher, "on"); |
|
|
|
return legend; |
|
|
|
}; |
|
|
|
|
|
},{"./legend":2}],5:[function(require,module,exports){ |
|
d3.legend = { |
|
color: require('./color'), |
|
size: require('./size'), |
|
symbol: require('./symbol') |
|
}; |
|
},{"./color":1,"./size":3,"./symbol":4}]},{},[5]); |