removed the distributions from scatter model to the scatterWithLegend.. making scatter.js perform as best as possible for use as an interactive layer
Bob Monteverde
12 years ago
parent
d988f100fa
commit
2741676827
@ -1,96 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<svg id="test1"></svg>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/lineWithScatter.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
//Format A
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40;
|
||||
|
||||
var chart = nv.models.line()
|
||||
.width(width)
|
||||
.height(height)
|
||||
.margin({top: 20, right: 20, bottom: 20, left: 20})
|
||||
|
||||
|
||||
d3.select('#test1')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(sinAndCos())
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(graph) {
|
||||
window.onresize = function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40,
|
||||
margin = graph.margin();
|
||||
|
||||
|
||||
if (width < margin.left + margin.right + 20)
|
||||
width = margin.left + margin.right + 20;
|
||||
|
||||
if (height < margin.top + margin.bottom + 20)
|
||||
height = margin.top + margin.bottom + 20;
|
||||
|
||||
|
||||
graph
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
d3.select('#test1')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(graph);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,138 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
#chart1 {
|
||||
height: 500px;
|
||||
margin: 10px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart1">
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.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/lineWithScatter.js"></script>
|
||||
<script src="../src/models/lineWithLegend.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
var selector = '#chart1',
|
||||
chart = nv.models.lineWithLegend(),
|
||||
data = sinAndCos(),
|
||||
xTickFormat = d3.format(',r'),
|
||||
yTickFormat = d3.format(',.2f'),
|
||||
xAxisLabel = null,
|
||||
yAxisLabel = 'Voltage (v)',
|
||||
duration = 500;
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var container = d3.select(selector),
|
||||
width = function() { return parseInt(container.style('width')) },
|
||||
height = function() { return parseInt(container.style('height')) },
|
||||
svg = container.append('svg');
|
||||
|
||||
chart
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(xTickFormat);
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(yTickFormat)
|
||||
.axisLabel(yAxisLabel);
|
||||
|
||||
svg
|
||||
.attr('width', width())
|
||||
.attr('height', height())
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(chart) {
|
||||
var showTooltip = function(e) {
|
||||
var offsetElement = document.getElementById(selector.substr(1)),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatY = chart.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
|
||||
formatX = chart.xAxis.tickFormat();
|
||||
|
||||
// uses the chart's getX and getY, you may customize if x position is not the same as the value you want
|
||||
// ex. daily data without weekends, x is the index, while you want the date
|
||||
var content = '<h3>' + e.series.key + '</h3>' +
|
||||
'<p>' +
|
||||
formatY(chart.y()(e.point)) + ' at ' + formatX(chart.x()(e.point)) +
|
||||
'</p>';
|
||||
|
||||
nv.tooltip.show([left, top], content);
|
||||
};
|
||||
|
||||
chart.dispatch.on('tooltipShow', showTooltip);
|
||||
chart.dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
|
||||
window.onresize= function() {
|
||||
// now that width and height are functions, should be automatic..of course you can always override them
|
||||
d3.select('#chart1 svg')
|
||||
.attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
.attr('height', chart.height()())
|
||||
.call(chart);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
@ -1,250 +0,0 @@
|
||||
|
||||
// This is an attempt to use a scatter plot with the line plot do do point interaction
|
||||
// If this performs good, will likely use as the line implementation, this way the
|
||||
// point interaction using a voronoi will only be in the scatter not in the exact same code
|
||||
// in both the scatter and the line
|
||||
nv.models.line = function() {
|
||||
//Default Settings
|
||||
var margin = {top: 0, right: 0, bottom: 0, left: 0},
|
||||
width = 960,
|
||||
height = 500,
|
||||
color = d3.scale.category10().range(),
|
||||
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
|
||||
getSize = function() { return 2.5 }, // accessor to get the point radius from a data point
|
||||
forceX = [], // List of numbers to Force into the X scale (ie. 0, or a max / min, etc.)
|
||||
forceY = [], // List of nuumbers to Force into the Y 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
|
||||
xDomain, yDomain; // Used to manually set the x and y domain, good to save time if calculation has already been made
|
||||
|
||||
var x = d3.scale.linear(),
|
||||
y = d3.scale.linear(),
|
||||
scatter = nv.models.scatter().size(getSize).id(id),
|
||||
x0, y0,
|
||||
timeoutID;
|
||||
|
||||
|
||||
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate
|
||||
data.map(function(d) {
|
||||
return d.values.map(function(d,i) {
|
||||
return { x: getX(d,i), y: getY(d,i) }
|
||||
})
|
||||
}),
|
||||
availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom;
|
||||
|
||||
//store old scales if they exist
|
||||
x0 = x0 || x;
|
||||
y0 = y0 || y;
|
||||
|
||||
|
||||
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]);
|
||||
|
||||
var wrap = d3.select(this).selectAll('g.d3line').data([data]);
|
||||
var wrapEnter = wrap.enter().append('g').attr('class', 'd3line');
|
||||
var defsEnter = wrapEnter.append('defs');
|
||||
var gEnter = wrapEnter.append('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'lines');
|
||||
|
||||
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
if (clipEdge) {
|
||||
defsEnter.append('clipPath')
|
||||
.attr('id', 'edge-clip-' + id)
|
||||
.append('rect');
|
||||
wrap.select('#edge-clip-' + id + ' rect')
|
||||
.attr('width', availableWidth)
|
||||
.attr('height', availableHeight);
|
||||
|
||||
gEnter
|
||||
.attr('clip-path', 'url(#edge-clip-' + id + ')');
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
var lines = wrap.select('.lines').selectAll('.line')
|
||||
.data(function(d) { return d }, function(d) { return d.key });
|
||||
lines.enter().append('g')
|
||||
.style('stroke-opacity', 1e-6)
|
||||
.style('fill-opacity', 1e-6);
|
||||
d3.transition(lines.exit())
|
||||
.style('stroke-opacity', 1e-6)
|
||||
.style('fill-opacity', 1e-6)
|
||||
.remove();
|
||||
lines
|
||||
.attr('class', function(d,i) { return 'line series-' + i })
|
||||
.classed('hover', function(d) { return d.hover })
|
||||
.style('fill', function(d,i){ return color[i % 10] })
|
||||
.style('stroke', function(d,i){ return color[i % 10] })
|
||||
d3.transition(lines)
|
||||
.style('stroke-opacity', 1)
|
||||
.style('fill-opacity', .5)
|
||||
|
||||
|
||||
var paths = lines.selectAll('path')
|
||||
.data(function(d, i) { return [d.values] });
|
||||
paths.enter().append('path')
|
||||
.attr('d', d3.svg.line()
|
||||
.x(function(d,i) { return x0(getX(d,i)) })
|
||||
.y(function(d,i) { return y0(getY(d,i)) })
|
||||
);
|
||||
d3.transition(lines.exit().selectAll('path'))
|
||||
.attr('d', d3.svg.line()
|
||||
.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()
|
||||
.x(function(d,i) { return x(getX(d,i)) })
|
||||
.y(function(d,i) { return y(getY(d,i)) })
|
||||
);
|
||||
|
||||
/*
|
||||
var points = lines.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)) });
|
||||
d3.transition(lines.exit().selectAll('circle.point'))
|
||||
.attr('cx', function(d,i) { return x(getX(d,i)) })
|
||||
.attr('cy', function(d,i) { return y(getY(d,i)) })
|
||||
.remove();
|
||||
d3.transition(points)
|
||||
.attr('class', function(d,i) { return 'point point-' + i })
|
||||
.attr('cx', function(d,i) { return x(getX(d,i)) })
|
||||
.attr('cy', function(d,i) { return y(getY(d,i)) })
|
||||
.attr('r', getSize);
|
||||
|
||||
*/
|
||||
|
||||
|
||||
scatter
|
||||
.width(availableWidth)
|
||||
.height(availableHeight)
|
||||
.xDomain(x.domain())
|
||||
.yDomain(y.domain())
|
||||
|
||||
|
||||
wrapEnter.append('g').attr('class', 'scatterWrap');
|
||||
var scatterWrap = wrap.select('.scatterWrap').datum(data);
|
||||
|
||||
d3.transition(scatterWrap).call(scatter);
|
||||
|
||||
|
||||
//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, 'size');
|
||||
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) return getX;
|
||||
getX = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) return getY;
|
||||
getY = _;
|
||||
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.xDomain = function(_) {
|
||||
if (!arguments.length) return xDomain;
|
||||
xDomain = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yDomain = function(_) {
|
||||
if (!arguments.length) return yDomain;
|
||||
yDomain = _;
|
||||
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.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.color = function(_) {
|
||||
if (!arguments.length) return color;
|
||||
color = _;
|
||||
scatter.color(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.id = function(_) {
|
||||
if (!arguments.length) return id;
|
||||
id = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,322 +0,0 @@
|
||||
//TODO: consider adding axes
|
||||
// -How to deal with time vs generic linear, vs any other scale?
|
||||
|
||||
nv.models.line = function() {
|
||||
//Default Settings
|
||||
var margin = {top: 0, right: 0, bottom: 0, left: 0}, //consider removing margin options from here... or make margin padding inside the chart (subtract margin from range)
|
||||
width = 960,
|
||||
height = 500,
|
||||
dotRadius = function() { return 2.5 }, //consider removing this, or making similar to scatter
|
||||
color = d3.scale.category10().range(),
|
||||
id = Math.floor(Math.random() * 10000), //Create semi-unique ID incase user doesn't select one
|
||||
getX = function(d) { return d.x },
|
||||
getY = function(d) { return d.y },
|
||||
interactive = true,
|
||||
clipEdge = false,
|
||||
clipVoronoi = true,
|
||||
xDomain, yDomain;
|
||||
|
||||
var x = d3.scale.linear(),
|
||||
y = d3.scale.linear(),
|
||||
dispatch = d3.dispatch('pointMouseover', 'pointMouseout'),
|
||||
x0, y0;
|
||||
|
||||
|
||||
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var seriesData = data.map(function(d) {
|
||||
return d.values.map(function(d,i) {
|
||||
return { x: getX(d,i), y: getY(d,i) }
|
||||
})
|
||||
}),
|
||||
availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom;
|
||||
|
||||
x0 = x0 || x;
|
||||
y0 = y0 || y;
|
||||
|
||||
|
||||
x .domain(xDomain || d3.extent(d3.merge(seriesData), function(d) { return d.x } ))
|
||||
.range([0, availableWidth]);
|
||||
|
||||
y .domain(yDomain || d3.extent(d3.merge(seriesData), function(d) { return d.y } ))
|
||||
.range([availableHeight, 0]);
|
||||
|
||||
|
||||
var wrap = d3.select(this).selectAll('g.d3line').data([data]);
|
||||
var wrapEnter = wrap.enter().append('g').attr('class', 'd3line');
|
||||
var gEnter = wrapEnter.append('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'lines');
|
||||
|
||||
var g = wrap.select('g')
|
||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
|
||||
wrapEnter.append('defs').append('clipPath')
|
||||
.attr('id', 'chart-clip-path-' + id)
|
||||
.append('rect');
|
||||
wrap.select('#chart-clip-path-' + id + ' rect')
|
||||
.attr('width', availableWidth)
|
||||
.attr('height', availableHeight);
|
||||
|
||||
gEnter
|
||||
.attr('clip-path', clipEdge ? 'url(#chart-clip-path-' + id + ')' : '');
|
||||
|
||||
var shiftWrap = gEnter.append('g').attr('class', 'shiftWrap');
|
||||
|
||||
|
||||
|
||||
// destroy interactive layer during transition,
|
||||
// VERY needed because of performance issues
|
||||
// TODO: check if this is necessary with new interaction
|
||||
g.selectAll('.point-clips *, .point-paths *').remove();
|
||||
|
||||
|
||||
function interactiveLayer() {
|
||||
if (!interactive) return false;
|
||||
|
||||
shiftWrap.append('g').attr('class', 'point-clips').append('clipPath').attr('id', 'voronoi-clip-path-' + id);
|
||||
shiftWrap.append('g').attr('class', 'point-paths');
|
||||
|
||||
var vertices = d3.merge(data.map(function(line, lineIndex) {
|
||||
return line.values.map(function(point, pointIndex) {
|
||||
//return [x(getX(point)), y(getY(point)), lineIndex, pointIndex]; //inject series and point index for reference into voronoi
|
||||
return [x(getX(point, pointIndex)) * (Math.random() / 1e12 + 1) , y(getY(point, pointIndex)) * (Math.random() / 1e12 + 1), lineIndex, pointIndex]; //temp hack to add noise untill I think of a better way so there are no duplicates
|
||||
})
|
||||
})
|
||||
);
|
||||
|
||||
/*
|
||||
// ***These clips are more than half the cause for the slowdown***
|
||||
//var pointClips = wrap.select('.point-clips').selectAll('clipPath') // **BROWSER BUG** can't reselect camel cased elements
|
||||
var pointClips = wrap.select('.point-clips').selectAll('.clip-path')
|
||||
.data(vertices);
|
||||
pointClips.enter().append('clipPath').attr('class', 'clip-path')
|
||||
.append('circle')
|
||||
.attr('r', 25);
|
||||
pointClips.exit().remove();
|
||||
pointClips
|
||||
.attr('id', function(d, i) { return 'clip-' + id + '-' + d[2] + '-' + d[3] })
|
||||
.attr('transform', function(d) { return 'translate(' + d[0] + ',' + d[1] + ')' })
|
||||
*/
|
||||
|
||||
var pointClips = wrap.select('#voronoi-clip-path-' + id).selectAll('circle')
|
||||
.data(vertices);
|
||||
pointClips.enter().append('circle')
|
||||
.attr('r', 25);
|
||||
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(#voronoi-clip-path-' + 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; })
|
||||
.style('fill-opacity', 0);
|
||||
pointPaths.exit().remove();
|
||||
pointPaths
|
||||
//.attr('clip-path', function(d,i) { return clipVoronoi ? 'url(#clip-' + id + '-' + d.series + '-' + d.point +')' : '' })
|
||||
.attr('d', function(d) { return 'M' + d.data.join(',') + 'Z'; })
|
||||
.on('mouseover', function(d) {
|
||||
var series = data[d.series],
|
||||
point = series.values[d.point];
|
||||
|
||||
dispatch.pointMouseover({
|
||||
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.pointMouseout({
|
||||
point: data[d.series].values[d.point],
|
||||
series: data[d.series],
|
||||
seriesIndex: d.series,
|
||||
pointIndex: d.point
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
dispatch.on('pointMouseover.point', function(d) {
|
||||
wrap.select('.series-' + d.seriesIndex + ' .point-' + d.pointIndex)
|
||||
.classed('hover', true);
|
||||
});
|
||||
dispatch.on('pointMouseout.point', function(d) {
|
||||
wrap.select('.series-' + d.seriesIndex + ' .point-' + d.pointIndex)
|
||||
.classed('hover', false);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
var lines = wrap.select('.lines').selectAll('.line')
|
||||
.data(function(d) { return d }, function(d) { return d.key });
|
||||
lines.enter().append('g')
|
||||
.style('stroke-opacity', 1e-6)
|
||||
.style('fill-opacity', 1e-6);
|
||||
d3.transition(lines.exit())
|
||||
.style('stroke-opacity', 1e-6)
|
||||
.style('fill-opacity', 1e-6)
|
||||
.remove();
|
||||
lines
|
||||
.attr('class', function(d,i) { return 'line series-' + i })
|
||||
.classed('hover', function(d) { return d.hover })
|
||||
.style('fill', function(d,i){ return color[i % 10] })
|
||||
.style('stroke', function(d,i){ return color[i % 10] })
|
||||
d3.transition(lines)
|
||||
.style('stroke-opacity', 1)
|
||||
.style('fill-opacity', .5)
|
||||
//.each('end', function(d,i) { if (!i) setTimeout(interactiveLayer, 0) }); //trying to call this after transitions are over, doesn't work on resize!
|
||||
//.each('end', function(d,i) { if (!i) interactiveLayer() }); //trying to call this after transitions are over, not sure if the timeout gains anything
|
||||
|
||||
setTimeout(interactiveLayer, 1000); //seems not to work as well as above... BUT fixes broken resize
|
||||
|
||||
var paths = lines.selectAll('path')
|
||||
.data(function(d, i) { return [d.values] });
|
||||
paths.enter().append('path')
|
||||
.attr('d', d3.svg.line()
|
||||
.x(function(d,i) { return x0(getX(d,i)) })
|
||||
.y(function(d,i) { return y0(getY(d,i)) })
|
||||
);
|
||||
//d3.transition(paths.exit())
|
||||
d3.transition(lines.exit().selectAll('path'))
|
||||
.attr('d', d3.svg.line()
|
||||
.x(function(d,i) { return x(getX(d,i)) })
|
||||
.y(function(d,i) { return y(getY(d,i)) })
|
||||
)
|
||||
.remove();
|
||||
d3.transition(paths)
|
||||
.attr('d', d3.svg.line()
|
||||
.x(function(d,i) { return x(getX(d,i)) })
|
||||
.y(function(d,i) { return y(getY(d,i)) })
|
||||
);
|
||||
|
||||
|
||||
var points = lines.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)) });
|
||||
d3.transition(points.exit())
|
||||
.attr('cx', function(d,i) { return x(getX(d,i)) })
|
||||
.attr('cy', function(d,i) { return y(getY(d,i)) })
|
||||
.remove();
|
||||
d3.transition(lines.exit().selectAll('circle.point'))
|
||||
.attr('cx', function(d,i) { return x(getX(d,i)) })
|
||||
.attr('cy', function(d,i) { return y(getY(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', dotRadius);
|
||||
|
||||
|
||||
x0 = x.copy();
|
||||
y0 = y.copy();
|
||||
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) return getX;
|
||||
getX = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) return getY;
|
||||
getY = _;
|
||||
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.xDomain = function(_) {
|
||||
if (!arguments.length) return xDomain;
|
||||
xDomain = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yDomain = function(_) {
|
||||
if (!arguments.length) return yDomain;
|
||||
yDomain = _;
|
||||
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.dotRadius = function(_) {
|
||||
if (!arguments.length) return dotRadius;
|
||||
dotRadius = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) return color;
|
||||
color = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.id = function(_) {
|
||||
if (!arguments.length) return id;
|
||||
id = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
Loading…
Reference in New Issue