new fisheye code... somewhat sloppy.. will be re-writing some components in order to do things more 'correctly'
Bob Monteverde
12 years ago
parent
cf8f7ca21a
commit
8b850258d1
@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
#offsetDiv {
|
||||
margin-left: 100px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
#test1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#test1 svg {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="offsetDiv">
|
||||
<div id="test1" class="chartWrap">
|
||||
<svg></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../lib/fisheye.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/scatterFisheyeChart.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
//Format A
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.scatterFisheyeChart()
|
||||
.showDistX(false)
|
||||
.showDistY(false)
|
||||
//.height(500)
|
||||
.color(d3.scale.category10().range());
|
||||
|
||||
chart.xAxis.tickFormat(d3.format('.02f'))
|
||||
chart.yAxis.tickFormat(d3.format('.02f'))
|
||||
|
||||
d3.select('#test1 svg')
|
||||
.datum(randomData(4,40))
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
function randomData(groups, points) { //# groups,# points per group
|
||||
var data = [],
|
||||
shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
|
||||
random = d3.random.normal();
|
||||
|
||||
for (i = 0; i < groups; i++) {
|
||||
data.push({
|
||||
key: 'Group ' + i,
|
||||
values: []
|
||||
});
|
||||
|
||||
for (j = 0; j < points; j++) {
|
||||
data[i].values.push({
|
||||
x: random(),
|
||||
y: random(),
|
||||
size: Math.random(),
|
||||
shape: shapes[j % 6]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,472 @@
|
||||
|
||||
nv.models.scatter = function() {
|
||||
//Default Settings
|
||||
var margin = {top: 0, right: 0, bottom: 0, left: 0},
|
||||
width = 960,
|
||||
height = 500,
|
||||
color = d3.scale.category20().range(), // array of colors to be used in order
|
||||
shape = 'circle',
|
||||
id = Math.floor(Math.random() * 100000), //Create semi-unique ID incase user doesn't selet one
|
||||
x = d3.scale.linear(),
|
||||
y = d3.scale.linear(),
|
||||
z = d3.scale.linear(), //linear because d3.svg.shape.size is treated as area
|
||||
//z = d3.scale.sqrt(), //sqrt because point size is done by area, not radius
|
||||
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
|
||||
getSize = function(d) { return d.size }, // accessor to get the point radius from a data point //TODO: consider renamig size to z
|
||||
forceX = [], // List of numbers to Force into the X scale (ie. 0, or a max / min, etc.)
|
||||
forceY = [], // List of numbers to Force into the Y scale
|
||||
forceSize = [], // List of numbers to Force into the Size scale
|
||||
interactive = true, // If true, plots a voronoi overlay for advanced point interection
|
||||
clipEdge = false, // if true, masks lines within x and y scale
|
||||
clipVoronoi = true, // if true, masks each point with a circle... can turn off to slightly increase performance
|
||||
clipRadius = function() { return 25 }, // function to get the radius for point clips
|
||||
fisheyeEnabled = false,
|
||||
fisheyeRadius = 150,
|
||||
xDomain, yDomain, sizeDomain; // Used to manually set the x and y domain, good to save time if calculation has already been made
|
||||
|
||||
var dispatch = d3.dispatch('elementClick', 'elementMouseover', 'elementMouseout'),
|
||||
x0, y0, z0,
|
||||
timeoutID;
|
||||
|
||||
/*
|
||||
if (d3.fisheye)
|
||||
var fisheye = d3.fisheye();
|
||||
//.radius(fisheyeRadius);
|
||||
*/
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
//var seriesData = data.map(function(d) {
|
||||
var availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom,
|
||||
container = d3.select(this);
|
||||
|
||||
//store old scales if they exist
|
||||
x0 = x0 || x;
|
||||
y0 = y0 || y;
|
||||
z0 = z0 || z;
|
||||
|
||||
//add series index to each data point for reference
|
||||
data = data.map(function(series, i) {
|
||||
series.values = series.values.map(function(point) {
|
||||
point.series = i;
|
||||
return point;
|
||||
});
|
||||
return series;
|
||||
});
|
||||
|
||||
|
||||
// slight remap of the data for use in calculating the scales domains
|
||||
var seriesData = (xDomain && yDomain && sizeDomain) ? [] : // if we know xDomain and yDomain and sizeDomain, no need to calculate.... if Size is constant remember to set sizeDomain to speed up performance
|
||||
data.map(function(d) {
|
||||
return d.values.map(function(d,i) {
|
||||
return { x: getX(d,i), y: getY(d,i), size: getSize(d,i) }
|
||||
})
|
||||
});
|
||||
|
||||
//TODO: figure out the best way to deal with scales with equal MIN and MAX
|
||||
x .domain(xDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.x }).concat(forceX)))
|
||||
.range([0, availableWidth]);
|
||||
|
||||
y .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(forceY)))
|
||||
.range([availableHeight, 0]);
|
||||
|
||||
z .domain(sizeDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.size }).concat(forceSize)))
|
||||
.range([16, 256]);
|
||||
//.range([2, 10]);
|
||||
|
||||
|
||||
|
||||
var wrap = container.selectAll('g.wrap.scatter').data([data]);
|
||||
var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 scatter chart-' +id);
|
||||
var defsEnter = wrapEnter.append('defs');
|
||||
var gEnter = wrapEnter.append('g');
|
||||
var g = wrap.select('g')
|
||||
|
||||
gEnter.append('g').attr('class', 'groups');
|
||||
|
||||
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
defsEnter.append('clipPath')
|
||||
.attr('id', 'edge-clip-' + id)
|
||||
.append('rect');
|
||||
|
||||
wrap.select('#edge-clip-' + id + ' rect')
|
||||
.attr('width', availableWidth)
|
||||
.attr('height', availableHeight);
|
||||
|
||||
g .attr('clip-path', clipEdge ? 'url(#edge-clip-' + id + ')' : '');
|
||||
|
||||
|
||||
|
||||
function updateInteractiveLayer() {
|
||||
|
||||
if (!interactive) {
|
||||
//wrap.select('#points-clip-' + id).remove();
|
||||
//wrap.select('.point-paths').remove();
|
||||
return false;
|
||||
}
|
||||
|
||||
gEnter.append('g').attr('class', 'point-paths');
|
||||
|
||||
var vertices = d3.merge(data.map(function(group, groupIndex) {
|
||||
return group.values.map(function(point, pointIndex) {
|
||||
// Adding noise to make duplicates very unlikely
|
||||
// Inject series and point index for reference
|
||||
return [x(getX(point,pointIndex)) * (Math.random() / 1e12 + 1) , y(getY(point,pointIndex)) * (Math.random() / 1e12 + 1), groupIndex, pointIndex]; //temp hack to add noise untill I think of a better way so there are no duplicates
|
||||
})
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
if (clipVoronoi) {
|
||||
defsEnter.append('clipPath').attr('id', 'points-clip-' + id);
|
||||
|
||||
var pointClips = wrap.select('#points-clip-' + id).selectAll('circle')
|
||||
.data(vertices);
|
||||
pointClips.enter().append('circle')
|
||||
.attr('r', clipRadius);
|
||||
pointClips.exit().remove();
|
||||
pointClips
|
||||
.attr('cx', function(d) { return d[0] })
|
||||
.attr('cy', function(d) { return d[1] });
|
||||
|
||||
wrap.select('.point-paths')
|
||||
.attr('clip-path', 'url(#points-clip-' + id + ')');
|
||||
}
|
||||
|
||||
|
||||
//inject series and point index for reference into voronoi
|
||||
// considering adding a removeZeros option, may be useful for the stacked chart and maybe others
|
||||
var voronoi = d3.geom.voronoi(vertices).map(function(d, i) { return { 'data': d, 'series': vertices[i][2], 'point': vertices[i][3] } });
|
||||
|
||||
|
||||
var pointPaths = wrap.select('.point-paths').selectAll('path')
|
||||
.data(voronoi);
|
||||
pointPaths.enter().append('path')
|
||||
.attr('class', function(d,i) { return 'path-'+i; });
|
||||
pointPaths.exit().remove();
|
||||
pointPaths
|
||||
.attr('d', function(d) { return 'M' + d.data.join(',') + 'Z'; })
|
||||
.on('click', function(d) {
|
||||
var series = data[d.series],
|
||||
point = series.values[d.point];
|
||||
|
||||
dispatch.elementClick({
|
||||
point: point,
|
||||
series:series,
|
||||
pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
|
||||
seriesIndex: d.series,
|
||||
pointIndex: d.point
|
||||
});
|
||||
})
|
||||
.on('mouseover', function(d) {
|
||||
var series = data[d.series],
|
||||
point = series.values[d.point];
|
||||
|
||||
dispatch.elementMouseover({
|
||||
point: point,
|
||||
series:series,
|
||||
pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
|
||||
seriesIndex: d.series,
|
||||
pointIndex: d.point
|
||||
});
|
||||
})
|
||||
.on('mouseout', function(d, i) {
|
||||
dispatch.elementMouseout({
|
||||
point: data[d.series].values[d.point],
|
||||
series: data[d.series],
|
||||
seriesIndex: d.series,
|
||||
pointIndex: d.point
|
||||
});
|
||||
});
|
||||
|
||||
dispatch.on('elementMouseover.point', function(d) {
|
||||
//wrap.select('.series-' + d.seriesIndex + ' .point-' + d.pointIndex)
|
||||
if (interactive)
|
||||
d3.select('.chart-' + id + ' .series-' + d.seriesIndex + ' .point-' + d.pointIndex)
|
||||
.classed('hover', true);
|
||||
});
|
||||
|
||||
dispatch.on('elementMouseout.point', function(d) {
|
||||
//wrap.select('.series-' + d.seriesIndex + ' .point-' + d.pointIndex)
|
||||
if (interactive)
|
||||
d3.select('.chart-' + id + ' .series-' + d.seriesIndex + ' .point-' + d.pointIndex)
|
||||
.classed('hover', false);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
var groups = wrap.select('.groups').selectAll('.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 'group series-' + i })
|
||||
.classed('hover', function(d) { return d.hover });
|
||||
d3.transition(groups)
|
||||
.style('fill', function(d,i) { return color[i % color.length] })
|
||||
.style('stroke', function(d,i) { return color[i % color.length] })
|
||||
.style('stroke-opacity', 1)
|
||||
.style('fill-opacity', .5);
|
||||
|
||||
|
||||
/*
|
||||
var points = groups.selectAll('circle.point')
|
||||
.data(function(d) { return d.values });
|
||||
points.enter().append('circle')
|
||||
.attr('cx', function(d,i) { return x0(getX(d,i)) })
|
||||
.attr('cy', function(d,i) { return y0(getY(d,i)) })
|
||||
.attr('r', function(d,i) { return z0(getSize(d,i)) });
|
||||
//d3.transition(points.exit())
|
||||
d3.transition(groups.exit().selectAll('circle.point'))
|
||||
.attr('cx', function(d,i) { return x(getX(d,i)) })
|
||||
.attr('cy', function(d,i) { return y(getY(d,i)) })
|
||||
.attr('r', function(d,i) { return z(getSize(d,i)) })
|
||||
.remove();
|
||||
points.attr('class', function(d,i) { return 'point point-' + i });
|
||||
d3.transition(points)
|
||||
.attr('cx', function(d,i) { return x(getX(d,i)) })
|
||||
.attr('cy', function(d,i) { return y(getY(d,i)) })
|
||||
.attr('r', function(d,i) { return z(getSize(d,i)) });
|
||||
*/
|
||||
|
||||
var points = groups.selectAll('path.point')
|
||||
.data(function(d) { return d.values });
|
||||
points.enter().append('path')
|
||||
.attr('transform', function(d,i) {
|
||||
return 'translate(' + x0(getX(d,i)) + ',' + y0(getY(d,i)) + ')'
|
||||
})
|
||||
.attr('d',
|
||||
d3.svg.symbol()
|
||||
.type(function(d,i) { return d.shape || shape })
|
||||
.size(function(d,i) { return z(getSize(d,i)) })
|
||||
);
|
||||
//.attr('r', function(d,i) { return z0(getSize(d,i)) });
|
||||
//d3.transition(points.exit())
|
||||
d3.transition(groups.exit().selectAll('path.point'))
|
||||
.attr('transform', function(d,i) {
|
||||
return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
|
||||
})
|
||||
//.attr('r', function(d,i) { return z(getSize(d,i)) })
|
||||
.remove();
|
||||
points.attr('class', function(d,i) { return 'point point-' + i });
|
||||
d3.transition(points)
|
||||
.attr('transform', function(d,i) {
|
||||
return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
|
||||
})
|
||||
.attr('d',
|
||||
d3.svg.symbol()
|
||||
.type(function(d,i) { return d.shape || shape })
|
||||
.size(function(d,i) { return z(getSize(d,i)) })
|
||||
);
|
||||
//.attr('r', function(d,i) { return z(getSize(d,i)) });
|
||||
|
||||
|
||||
/*
|
||||
if (fisheyeEnabled) {
|
||||
var fisheyeBox = container.append('rect')
|
||||
.attr('class', 'fisheyeBox')
|
||||
.style('fill-opacity', 0)
|
||||
.style('stroke-opacity', 0)
|
||||
.attr('width', availableWidth)
|
||||
.attr('height', availableHeight);
|
||||
|
||||
fisheye.radius(fisheyeRadius);
|
||||
|
||||
fisheyeBox.on("mousemove", function() {
|
||||
if (!fisheyeEnabled) return true;
|
||||
|
||||
fisheye.center(d3.mouse(this));
|
||||
|
||||
points
|
||||
.each(function(d,i) { d.display = fisheye({x: x(getX(d,i)), y: y(getY(d,i)) }); })
|
||||
.attr('transform', function(d,i) {
|
||||
return 'translate(' + d.display.x + ',' + d.display.y + ')'
|
||||
})
|
||||
.attr('d',
|
||||
d3.svg.symbol()
|
||||
.type(function(d,i) { return d.shape || shape })
|
||||
.size(function(d,i) { return z(getSize(d,i)) * d.display.z })
|
||||
);
|
||||
});
|
||||
|
||||
} else {
|
||||
container.select('.fisheyeBox').remove();
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
clearTimeout(timeoutID);
|
||||
timeoutID = setTimeout(updateInteractiveLayer, 750);
|
||||
|
||||
//store old scales for use in transitions on update, to animate from old to new positions, and sizes
|
||||
x0 = x.copy();
|
||||
y0 = y.copy();
|
||||
z0 = z.copy();
|
||||
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) return getX;
|
||||
getX = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) return getY;
|
||||
getY = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.size = function(_) {
|
||||
if (!arguments.length) return getSize;
|
||||
getSize = d3.functor(_);
|
||||
return 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.xScale = function(_) {
|
||||
if (!arguments.length) return x;
|
||||
x = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yScale = function(_) {
|
||||
if (!arguments.length) return y;
|
||||
y = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.zScale = function(_) {
|
||||
if (!arguments.length) return z;
|
||||
z = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xDomain = function(_) {
|
||||
if (!arguments.length) return xDomain;
|
||||
xDomain = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yDomain = function(_) {
|
||||
if (!arguments.length) return yDomain;
|
||||
yDomain = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.sizeDomain = function(_) {
|
||||
if (!arguments.length) return sizeDomain;
|
||||
sizeDomain = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.forceX = function(_) {
|
||||
if (!arguments.length) return forceX;
|
||||
forceX = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.forceY = function(_) {
|
||||
if (!arguments.length) return forceY;
|
||||
forceY = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.forceSize = function(_) {
|
||||
if (!arguments.length) return forceSize;
|
||||
forceSize = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.interactive = function(_) {
|
||||
if (!arguments.length) return interactive;
|
||||
interactive = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.clipEdge = function(_) {
|
||||
if (!arguments.length) return clipEdge;
|
||||
clipEdge = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.clipVoronoi= function(_) {
|
||||
if (!arguments.length) return clipVoronoi;
|
||||
clipVoronoi = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.clipRadius = function(_) {
|
||||
if (!arguments.length) return clipRadius;
|
||||
clipRadius = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) return color;
|
||||
color = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.shape= function(_) {
|
||||
if (!arguments.length) return shape;
|
||||
shape = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.id = function(_) {
|
||||
if (!arguments.length) return id;
|
||||
id = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.fisheye = function(_) {
|
||||
if (!arguments.length) return fisheyeEnabled;
|
||||
fisheyeEnabled = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.fisheyeRadius = function(_) {
|
||||
if (!arguments.length) return fisheyeRadius;
|
||||
fisheyeRadius = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -0,0 +1,390 @@
|
||||
|
||||
nv.models.scatterFisheyeChart = function() {
|
||||
var margin = {top: 30, right: 20, bottom: 50, left: 60},
|
||||
width = null,
|
||||
height = null,
|
||||
color = d3.scale.category20().range(),
|
||||
showDistX = false,
|
||||
showDistY = false,
|
||||
showLegend = true,
|
||||
showControls = true,
|
||||
fisheye = 0,
|
||||
tooltips = true,
|
||||
tooltipX = function(key, x, y) { return '<strong>' + x + '</strong>' },
|
||||
tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' },
|
||||
tooltip = function(key, x, y, e, graph) {
|
||||
return '<h3>' + key + '</h3>' +
|
||||
'<p>' + y + ' at ' + x + '</p>'
|
||||
};
|
||||
|
||||
var x = d3.fisheye.scale(d3.scale.linear).distortion(0),
|
||||
y = d3.fisheye.scale(d3.scale.linear).distortion(0);
|
||||
|
||||
var scatter = nv.models.scatter().xScale(x).yScale(y),
|
||||
//x = scatter.xScale(),
|
||||
//y = scatter.yScale(),
|
||||
xAxis = nv.models.axis().orient('bottom').scale(x).tickPadding(10),
|
||||
yAxis = nv.models.axis().orient('left').scale(y).tickPadding(10),
|
||||
legend = nv.models.legend().height(30),
|
||||
controls = nv.models.legend().height(30),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
|
||||
x0, y0; //TODO: abstract distribution component and have old scales stored there
|
||||
|
||||
var showTooltip = function(e, offsetElement) {
|
||||
//TODO: make tooltip style an option between single or dual on axes (maybe on all charts with axes?)
|
||||
|
||||
//var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
|
||||
//top = e.pos[1] + ( offsetElement.offsetTop || 0),
|
||||
var leftX = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
|
||||
topX = y.range()[0] + margin.top + ( offsetElement.offsetTop || 0),
|
||||
leftY = x.range()[0] + margin.left + ( offsetElement.offsetLeft || 0 ),
|
||||
topY = e.pos[1] + ( offsetElement.offsetTop || 0),
|
||||
xVal = xAxis.tickFormat()(scatter.x()(e.point)),
|
||||
yVal = yAxis.tickFormat()(scatter.y()(e.point)),
|
||||
contentX = tooltipX(e.series.key, xVal, yVal, e, chart),
|
||||
contentY = tooltipY(e.series.key, xVal, yVal, e, chart);
|
||||
//content = tooltip(e.series.key, xVal, yVal, e, chart);
|
||||
|
||||
nv.tooltip.show([leftX, topX], contentX, 'n', 1);
|
||||
nv.tooltip.show([leftY, topY], contentY, 'e', 1);
|
||||
//nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
|
||||
};
|
||||
|
||||
var controlsData = [
|
||||
{ key: 'Magnify', disabled: true }
|
||||
];
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var container = d3.select(this),
|
||||
that = this;
|
||||
|
||||
//TODO: decide if this makes sense to add into all the models for ease of updating (updating without needing the selection)
|
||||
chart.update = function() { selection.transition().call(chart) };
|
||||
|
||||
|
||||
var availableWidth = (width || parseInt(container.style('width')) || 960)
|
||||
- margin.left - margin.right,
|
||||
availableHeight = (height || parseInt(container.style('height')) || 400)
|
||||
- margin.top - margin.bottom;
|
||||
|
||||
|
||||
|
||||
x0 = x0 || scatter.xScale();
|
||||
y0 = y0 || scatter.yScale();
|
||||
|
||||
|
||||
var wrap = container.selectAll('g.wrap.scatterChart').data([data]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 scatterChart chart-' + scatter.id()).append('g');
|
||||
|
||||
|
||||
gEnter.append('rect')
|
||||
.attr('class', 'nvd3 background')
|
||||
.attr('width', availableWidth)
|
||||
.attr('height', availableHeight);
|
||||
|
||||
|
||||
gEnter.append('g').attr('class', 'legendWrap');
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'scatterWrap');
|
||||
gEnter.append('g').attr('class', 'controlsWrap');
|
||||
//gEnter.append('g').attr('class', 'distWrap');
|
||||
|
||||
var g = wrap.select('g')
|
||||
|
||||
if (showLegend) {
|
||||
legend.width( availableWidth / 2 );
|
||||
|
||||
wrap.select('.legendWrap')
|
||||
.datum(data)
|
||||
.call(legend);
|
||||
|
||||
if ( margin.top != legend.height()) {
|
||||
margin.top = legend.height();
|
||||
availableHeight = (height || parseInt(container.style('height')) || 400)
|
||||
- margin.top - margin.bottom;
|
||||
}
|
||||
|
||||
wrap.select('.legendWrap')
|
||||
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
|
||||
}
|
||||
|
||||
|
||||
scatter
|
||||
.width(availableWidth)
|
||||
.height(availableHeight)
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % color.length];
|
||||
}).filter(function(d,i) { return !data[i].disabled }))
|
||||
|
||||
|
||||
if (showControls) {
|
||||
controls.width(180).color(['#444']);
|
||||
g.select('.controlsWrap')
|
||||
.datum(controlsData)
|
||||
.attr('transform', 'translate(0,' + (-margin.top) +')')
|
||||
.call(controls);
|
||||
}
|
||||
|
||||
|
||||
g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
var scatterWrap = wrap.select('.scatterWrap')
|
||||
.datum(data.filter(function(d) { return !d.disabled }));
|
||||
d3.transition(scatterWrap).call(scatter);
|
||||
|
||||
|
||||
xAxis
|
||||
.ticks( availableWidth / 100 )
|
||||
.tickSize( -availableHeight , 0);
|
||||
|
||||
g.select('.x.axis')
|
||||
.attr('transform', 'translate(0,' + y.range()[0] + ')');
|
||||
d3.transition(g.select('.x.axis'))
|
||||
.call(xAxis);
|
||||
|
||||
|
||||
yAxis
|
||||
.ticks( availableHeight / 36 )
|
||||
.tickSize( -availableWidth, 0);
|
||||
|
||||
d3.transition(g.select('.y.axis'))
|
||||
.call(yAxis);
|
||||
|
||||
|
||||
|
||||
|
||||
//TODO abstract Distribution into its own component
|
||||
if ( showDistX || showDistY) {
|
||||
var distWrap = scatterWrap.selectAll('g.distribution')
|
||||
.data(function(d) { return d }, function(d) { return d.key });
|
||||
|
||||
distWrap.enter().append('g').attr('class', function(d,i) { return 'distribution series-' + i })
|
||||
|
||||
distWrap.style('stroke', function(d,i) { return color.filter(function(d,i) { return data[i] && !data[i].disabled })[i % color.length] })
|
||||
}
|
||||
|
||||
if (showDistX) {
|
||||
var distX = distWrap.selectAll('line.distX')
|
||||
.data(function(d) { return d.values })
|
||||
distX.enter().append('line')
|
||||
.attr('x1', function(d,i) { return x0(scatter.x()(d,i)) })
|
||||
.attr('x2', function(d,i) { return x0(scatter.x()(d,i)) })
|
||||
//d3.transition(distX.exit())
|
||||
d3.transition(distWrap.exit().selectAll('line.distX'))
|
||||
.attr('x1', function(d,i) { return x(scatter.x()(d,i)) })
|
||||
.attr('x2', function(d,i) { return x(scatter.x()(d,i)) })
|
||||
.remove();
|
||||
distX
|
||||
.attr('class', function(d,i) { return 'distX distX-' + i })
|
||||
.attr('y1', y.range()[0])
|
||||
.attr('y2', y.range()[0] + 8);
|
||||
d3.transition(distX)
|
||||
.attr('x1', function(d,i) { return x(scatter.x()(d,i)) })
|
||||
.attr('x2', function(d,i) { return x(scatter.x()(d,i)) })
|
||||
}
|
||||
|
||||
|
||||
if (showDistY) {
|
||||
var distY = distWrap.selectAll('line.distY')
|
||||
.data(function(d) { return d.values })
|
||||
distY.enter().append('line')
|
||||
.attr('y1', function(d,i) { return y0(scatter.y()(d,i)) })
|
||||
.attr('y2', function(d,i) { return y0(scatter.y()(d,i)) });
|
||||
//d3.transition(distY.exit())
|
||||
d3.transition(distWrap.exit().selectAll('line.distY'))
|
||||
.attr('y1', function(d,i) { return y(scatter.y()(d,i)) })
|
||||
.attr('y2', function(d,i) { return y(scatter.y()(d,i)) })
|
||||
.remove();
|
||||
distY
|
||||
.attr('class', function(d,i) { return 'distY distY-' + i })
|
||||
.attr('x1', x.range()[0])
|
||||
.attr('x2', x.range()[0] - 8)
|
||||
d3.transition(distY)
|
||||
.attr('y1', function(d,i) { return y(scatter.y()(d,i)) }) .attr('y2', function(d,i) { return y(scatter.y()(d,i)) });
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
legend.dispatch.on('legendClick', function(d,i, that) {
|
||||
d.disabled = !d.disabled;
|
||||
|
||||
if (!data.filter(function(d) { return !d.disabled }).length) {
|
||||
data.map(function(d) {
|
||||
d.disabled = false;
|
||||
wrap.selectAll('.series').classed('disabled', false);
|
||||
return d;
|
||||
});
|
||||
}
|
||||
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
|
||||
controls.dispatch.on('legendClick', function(d,i) {
|
||||
d.disabled = !d.disabled;
|
||||
|
||||
fisheye = d.disabled ? 0 : 2.5;
|
||||
g.select('.background').style('pointer-events', d.disabled ? 'none' : 'all');
|
||||
scatter.interactive(d.disabled);
|
||||
tooltips = d.disabled;
|
||||
|
||||
if (d.disabled) {
|
||||
x.distortion(fisheye).focus(0);
|
||||
y.distortion(fisheye).focus(0);
|
||||
|
||||
scatterWrap.call(scatter);
|
||||
g.select(".x.axis").call(xAxis);
|
||||
g.select(".y.axis").call(yAxis);
|
||||
}
|
||||
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
|
||||
/*
|
||||
legend.dispatch.on('legendMouseover', function(d, i) {
|
||||
d.hover = true;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
|
||||
legend.dispatch.on('legendMouseout', function(d, i) {
|
||||
d.hover = false;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
scatter.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
//scatterWrap.select('.series-' + e.seriesIndex + ' .distX-' + e.pointIndex)
|
||||
d3.select('.chart-' + scatter.id() + ' .series-' + e.seriesIndex + ' .distX-' + e.pointIndex)
|
||||
.attr('y1', e.pos[1]);
|
||||
//scatterWrap.select('.series-' + e.seriesIndex + ' .distY-' + e.pointIndex)
|
||||
d3.select('.chart-' + scatter.id() + ' .series-' + e.seriesIndex + ' .distY-' + e.pointIndex)
|
||||
.attr('x1', e.pos[0]);
|
||||
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
|
||||
dispatch.tooltipShow(e);
|
||||
});
|
||||
//if (tooltips) dispatch.on('tooltipShow', function(e) { showTooltip(e, container[0][0].parentNode) } ); // TODO: maybe merge with above?
|
||||
dispatch.on('tooltipShow', function(e) {
|
||||
if (tooltips) showTooltip(e, that.parentNode);
|
||||
});
|
||||
|
||||
scatter.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
|
||||
//scatterWrap.select('.series-' + e.seriesIndex + ' .distX-' + e.pointIndex)
|
||||
d3.select('.chart-' + scatter.id() + ' .series-' + e.seriesIndex + ' .distX-' + e.pointIndex)
|
||||
.attr('y1', y.range()[0]);
|
||||
//scatterWrap.select('.series-' + e.seriesIndex + ' .distY-' + e.pointIndex)
|
||||
d3.select('.chart-' + scatter.id() + ' .series-' + e.seriesIndex + ' .distY-' + e.pointIndex)
|
||||
.attr('x1', x.range()[0]);
|
||||
});
|
||||
dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
|
||||
|
||||
//TODO: get distributions to work with fisheye
|
||||
g.select('.background').on("mousemove", updateFisheye);
|
||||
g.select('.point-paths').on("mousemove", updateFisheye);
|
||||
|
||||
function updateFisheye() {
|
||||
var mouse = d3.mouse(this);
|
||||
x.distortion(fisheye).focus(mouse[0]);
|
||||
y.distortion(fisheye).focus(mouse[1]);
|
||||
|
||||
scatterWrap.call(scatter);
|
||||
g.select(".x.axis").call(xAxis);
|
||||
g.select(".y.axis").call(yAxis);
|
||||
}
|
||||
|
||||
//store old scales for use in transitions on update, to animate from old to new positions, and sizes
|
||||
x0 = x.copy();
|
||||
y0 = y.copy();
|
||||
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.legend = legend;
|
||||
chart.xAxis = xAxis;
|
||||
chart.yAxis = yAxis;
|
||||
|
||||
d3.rebind(chart, scatter, 'interactive', 'shape', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius', 'fisheye', 'fisheyeRadius');
|
||||
|
||||
|
||||
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.color = function(_) {
|
||||
if (!arguments.length) return color;
|
||||
color = _;
|
||||
legend.color(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showDistX = function(_) {
|
||||
if (!arguments.length) return showDistX;
|
||||
showDistX = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showDistY = function(_) {
|
||||
if (!arguments.length) return showDistY;
|
||||
showDistY = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showControls = function(_) {
|
||||
if (!arguments.length) return showControls;
|
||||
showControls = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showLegend = function(_) {
|
||||
if (!arguments.length) return showLegend;
|
||||
showLegend = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.fisheye = function(_) {
|
||||
if (!arguments.length) return fisheye;
|
||||
fisheye = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.tooltips = function(_) {
|
||||
if (!arguments.length) return tooltips;
|
||||
tooltips = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.tooltipContent = function(_) {
|
||||
if (!arguments.length) return tooltip;
|
||||
tooltip = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
Loading…
Reference in New Issue