diff options
author | 2017-09-01 11:57:47 +0800 | |
---|---|---|
committer | 2017-09-01 11:57:58 +0800 | |
commit | 57dbba269d19bc59fad89160200bb2dbcccb9003 (patch) | |
tree | d466041ceffa2161124ca79a48b3e077777c74b8 /usecaseui-common/src/main/webapp/static/fusion/raptor/d3/js/models/lineWithFisheye.js | |
parent | 4ff32341a0af1972b44a7410e76e9b231131e7ab (diff) |
Upload Monitor function code
Change-Id: I33ad76221b4cb771a298ff240245fc24be664efb
Issue-Id: USECASEUI-6
Signed-off-by: shentao <shentao@chinamobile.com>
Diffstat (limited to 'usecaseui-common/src/main/webapp/static/fusion/raptor/d3/js/models/lineWithFisheye.js')
-rw-r--r-- | usecaseui-common/src/main/webapp/static/fusion/raptor/d3/js/models/lineWithFisheye.js | 200 |
1 files changed, 200 insertions, 0 deletions
diff --git a/usecaseui-common/src/main/webapp/static/fusion/raptor/d3/js/models/lineWithFisheye.js b/usecaseui-common/src/main/webapp/static/fusion/raptor/d3/js/models/lineWithFisheye.js new file mode 100644 index 00000000..2b411672 --- /dev/null +++ b/usecaseui-common/src/main/webapp/static/fusion/raptor/d3/js/models/lineWithFisheye.js @@ -0,0 +1,200 @@ + +nv.models.line = function() { + "use strict"; + //Default Settings + var margin = {top: 0, right: 0, bottom: 0, left: 0}, + width = 960, + height = 500, + color = nv.utils.defaultColor(), // function that returns colors + id = Math.floor(Math.random() * 10000), //Create semi-unique ID incase user doesn't select one + getX = function(d) { return d.x }, // accessor to get the x value from a data point + getY = function(d) { return d.y }, // accessor to get the y value from a data point + clipEdge = false, // if true, masks lines within x and y scale + interpolate = "linear"; // controls the line interpolation + + + var scatter = nv.models.scatter() + .id(id) + .size(16) // default size + .sizeDomain([16,256]), //set to speed up calculation, needs to be unset if there is a custom size accessor + //x = scatter.xScale(), + //y = scatter.yScale(), + x, y, + x0, y0, timeoutID; + + + function chart(selection) { + selection.each(function(data) { + var availableWidth = width - margin.left - margin.right, + availableHeight = height - margin.top - margin.bottom; + + //get the scales inscase scatter scale was set manually + x = x || scatter.xScale(); + y = y || scatter.yScale(); + + //store old scales if they exist + x0 = x0 || x; + y0 = y0 || y; + + + var wrap = d3.select(this).selectAll('g.nv-wrap.nv-line').data([data]); + var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-line'); + var defsEnter = wrapEnter.append('defs'); + var gEnter = wrapEnter.append('g'); + var g = wrap.select('g') + + wrapEnter.append('g').attr('class', 'nv-scatterWrap'); + var scatterWrap = wrap.select('.nv-scatterWrap').datum(data); + + gEnter.append('g').attr('class', 'nv-groups'); + + + scatter + .width(availableWidth) + .height(availableHeight) + + d3.transition(scatterWrap).call(scatter); + + + wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); + + + defsEnter.append('clipPath') + .attr('id', 'nv-edge-clip-' + id) + .append('rect'); + + wrap.select('#nv-edge-clip-' + id + ' rect') + .attr('width', availableWidth) + .attr('height', availableHeight); + + g .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + id + ')' : ''); + scatterWrap + .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + id + ')' : ''); + + + + + var groups = wrap.select('.nv-groups').selectAll('.nv-group') + .data(function(d) { return d }, function(d) { return d.key }); + groups.enter().append('g') + .style('stroke-opacity', 1e-6) + .style('fill-opacity', 1e-6); + d3.transition(groups.exit()) + .style('stroke-opacity', 1e-6) + .style('fill-opacity', 1e-6) + .remove(); + groups + .attr('class', function(d,i) { return 'nv-group nv-series-' + i }) + .classed('hover', function(d) { return d.hover }) + .style('fill', function(d,i){ return color(d, i) }) + .style('stroke', function(d,i){ return color(d, i) }) + d3.transition(groups) + .style('stroke-opacity', 1) + .style('fill-opacity', .5) + + + var paths = groups.selectAll('path') + .data(function(d, i) { return [d.values] }); + paths.enter().append('path') + .attr('class', 'nv-line') + .attr('d', d3.svg.line() + .interpolate(interpolate) + .x(function(d,i) { return x0(getX(d,i)) }) + .y(function(d,i) { return y0(getY(d,i)) }) + ); + d3.transition(groups.exit().selectAll('path')) + .attr('d', d3.svg.line() + .interpolate(interpolate) + .x(function(d,i) { return x(getX(d,i)) }) + .y(function(d,i) { return y(getY(d,i)) }) + ) + .remove(); // redundant? line is already being removed + d3.transition(paths) + .attr('d', d3.svg.line() + .interpolate(interpolate) + .x(function(d,i) { return x(getX(d,i)) }) + .y(function(d,i) { return y(getY(d,i)) }) + ); + + + //store old scales for use in transitions on update, to animate from old to new positions + x0 = x.copy(); + y0 = y.copy(); + + }); + + return chart; + } + + + chart.dispatch = scatter.dispatch; + + d3.rebind(chart, scatter, 'interactive', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'xRange', 'yRange', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius'); + + chart.options = nv.utils.optionsFunc.bind(chart); + + chart.margin = function(_) { + if (!arguments.length) return margin; + margin = _; + return chart; + }; + + chart.width = function(_) { + if (!arguments.length) return width; + width = _; + return chart; + }; + + chart.height = function(_) { + if (!arguments.length) return height; + height = _; + return chart; + }; + + chart.x = function(_) { + if (!arguments.length) return getX; + getX = _; + scatter.x(_); + return chart; + }; + + chart.y = function(_) { + if (!arguments.length) return getY; + getY = _; + scatter.y(_); + return chart; + }; + + chart.clipEdge = function(_) { + if (!arguments.length) return clipEdge; + clipEdge = _; + return chart; + }; + + chart.color = function(_) { + if (!arguments.length) return color; + color = nv.utils.getColor(_); + scatter.color(color); + return chart; + }; + + chart.id = function(_) { + if (!arguments.length) return id; + id = _; + return chart; + }; + + chart.interpolate = function(_) { + if (!arguments.length) return interpolate; + interpolate = _; + return chart; + }; + + chart.defined = function(_) { + if (!arguments.length) return defined; + defined = _; + return chart; + }; + + return chart; +} |