blob42
/
nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

scatterWithFisheyeChart is now scatterChart

Browse Source
master-patched
Bob Monteverde 12 years ago
parent ea31b3ab1c
commit 7065557fde
4 changed files with 101 additions and 101 deletions
Show Stats Download Patch File Download Diff File

4
examples/scatterFisheyeChart.html → deprecated/scatterChart.html
Unescape Escape View File

@ -27,9 +27,9 @@ div {
}
*/
#test1 {
margin: 0;
height: 500px;
}
#test1 svg {
@ -54,7 +54,7 @@ div {
<script src="../src/models/axis.js"></script>
<script src="../src/models/distribution.js"></script>
<script src="../src/models/scatter.js"></script>
<script src="../src/models/scatterWithFisheyeChart.js"></script>
<script src="../src/models/scatterChart.js"></script>
<script>

98
src/models/scatterWithFisheyeChart.js → deprecated/scatterChart.js
Unescape Escape View File

@ -7,9 +7,6 @@ nv.models.scatterChart = function() {
showDistX = false,
showDistY = false,
showLegend = true,
showControls = true,
fisheye = 0,
pauseFisheye = false,
tooltips = true,
tooltipX = function(key, x, y) { return '<strong>' + x + '</strong>' },
tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' },
@ -19,16 +16,12 @@ nv.models.scatterChart = function() {
};
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(),
var scatter = nv.models.scatter(),
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),
distX = nv.models.distribution().axis('x').scale(x),
distY = nv.models.distribution().axis('y').scale(y),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
@ -54,10 +47,6 @@ nv.models.scatterChart = function() {
//nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
};
var controlsData = [
{ key: 'Magnify', disabled: true }
];
function chart(selection) {
selection.each(function(data) {
@ -83,19 +72,11 @@ nv.models.scatterChart = function() {
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', 'distWrap');
gEnter.append('g').attr('class', 'legendWrap');
gEnter.append('g').attr('class', 'controlsWrap');
var g = wrap.select('g')
@ -116,14 +97,6 @@ nv.models.scatterChart = function() {
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
}
if (showControls) {
controls.width(180).color(['#444']);
g.select('.controlsWrap')
.datum(controlsData)
.attr('transform', 'translate(0,' + (-margin.top) +')')
.call(controls);
}
scatter
.width(availableWidth)
@ -185,63 +158,6 @@ nv.models.scatterChart = function() {
.call(distY);
g.select('.background').on('mousemove', updateFisheye);
g.select('.background').on('click', function() { pauseFisheye = !pauseFisheye; });
//g.select('.point-paths').on('mousemove', updateFisheye);
function updateFisheye() {
if (pauseFisheye) {
//g.select('.background') .style('pointer-events', 'none');
g.select('.point-paths').style('pointer-events', 'all');
return false;
}
g.select('.background') .style('pointer-events', 'all');
g.select('.point-paths').style('pointer-events', 'none' );
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);
g.select('.distributionX')
.datum(data.filter(function(d) { return !d.disabled }))
.call(distX);
g.select('.distributionY')
.datum(data.filter(function(d) { return !d.disabled }))
.call(distY);
}
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');
g.select('.point-paths').style('pointer-events', d.disabled ? 'all' : 'none' );
//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);
} else {
pauseFisheye = false;
}
selection.transition().call(chart);
});
legend.dispatch.on('legendClick', function(d,i, that) {
d.disabled = !d.disabled;
@ -361,12 +277,6 @@ nv.models.scatterChart = function() {
return chart;
};
chart.fisheye = function(_) {
if (!arguments.length) return fisheye;
fisheye = _;
return chart;
};
chart.tooltips = function(_) {
if (!arguments.length) return tooltips;
tooltips = _;

2
examples/scatterChart.html
Unescape Escape View File

@ -27,9 +27,9 @@ div {
}
*/
#test1 {
margin: 0;
height: 500px;
}
#test1 svg {

98
src/models/scatterChart.js
Unescape Escape View File

@ -7,6 +7,9 @@ nv.models.scatterChart = function() {
showDistX = false,
showDistY = false,
showLegend = true,
showControls = true,
fisheye = 0,
pauseFisheye = false,
tooltips = true,
tooltipX = function(key, x, y) { return '<strong>' + x + '</strong>' },
tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' },
@ -16,12 +19,16 @@ nv.models.scatterChart = function() {
};
var scatter = nv.models.scatter(),
x = scatter.xScale(),
y = scatter.yScale(),
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),
distX = nv.models.distribution().axis('x').scale(x),
distY = nv.models.distribution().axis('y').scale(y),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
@ -47,6 +54,10 @@ nv.models.scatterChart = function() {
//nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
};
var controlsData = [
{ key: 'Magnify', disabled: true }
];
function chart(selection) {
selection.each(function(data) {
@ -72,11 +83,19 @@ nv.models.scatterChart = function() {
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('g').attr('class', 'legendWrap');
gEnter.append('rect')
.attr('class', 'nvd3 background')
.attr('width', availableWidth)
.attr('height', availableHeight);
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', 'distWrap');
gEnter.append('g').attr('class', 'legendWrap');
gEnter.append('g').attr('class', 'controlsWrap');
var g = wrap.select('g')
@ -97,6 +116,14 @@ nv.models.scatterChart = function() {
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
}
if (showControls) {
controls.width(180).color(['#444']);
g.select('.controlsWrap')
.datum(controlsData)
.attr('transform', 'translate(0,' + (-margin.top) +')')
.call(controls);
}
scatter
.width(availableWidth)
@ -158,6 +185,63 @@ nv.models.scatterChart = function() {
.call(distY);
g.select('.background').on('mousemove', updateFisheye);
g.select('.background').on('click', function() { pauseFisheye = !pauseFisheye; });
//g.select('.point-paths').on('mousemove', updateFisheye);
function updateFisheye() {
if (pauseFisheye) {
//g.select('.background') .style('pointer-events', 'none');
g.select('.point-paths').style('pointer-events', 'all');
return false;
}
g.select('.background') .style('pointer-events', 'all');
g.select('.point-paths').style('pointer-events', 'none' );
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);
g.select('.distributionX')
.datum(data.filter(function(d) { return !d.disabled }))
.call(distX);
g.select('.distributionY')
.datum(data.filter(function(d) { return !d.disabled }))
.call(distY);
}
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');
g.select('.point-paths').style('pointer-events', d.disabled ? 'all' : 'none' );
//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);
} else {
pauseFisheye = false;
}
selection.transition().call(chart);
});
legend.dispatch.on('legendClick', function(d,i, that) {
d.disabled = !d.disabled;
@ -277,6 +361,12 @@ nv.models.scatterChart = function() {
return chart;
};
chart.fisheye = function(_) {
if (!arguments.length) return fisheye;
fisheye = _;
return chart;
};
chart.tooltips = function(_) {
if (!arguments.length) return tooltips;
tooltips = _;

Write Preview
Loading…
Cancel
Save