vitalif-js
/
dimple
mirror of https://github.com/vitalif/dimple
1
0
Fork 0
Code Issues Releases Wiki Activity

In Out Animation Improvement

master
johnkiernander 2014-04-11 01:20:56 +01:00
parent 1e867416ac
commit 6ec000b3d6
6 changed files with 149 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
dist/dimple.v1.2.0.js vendored
View File

@ -3365,10 +3365,10 @@ var dimple = {
d.zField.join(" ").split(" ").join("_");
})
.attr("cx", function (d) {
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin);
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin);
})
.attr("cy", function (d) {
return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin);
return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin);
})
.attr("r", 0)
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
@ -3679,13 +3679,17 @@ var dimple = {
// the first aggField defines the points and the others define the line
firstAgg = (series.x._hasCategories() || series.y._hasCategories() ? 0 : 1),
// Build the point calculator
lineCoords = d3.svg.line()
.x(function (d) { return dimple._helpers.cx(d, chart, series); })
.y(function (d) { return dimple._helpers.cy(d, chart, series); }),
updateCoords = d3.svg.line()
.x(function (d) { return (dimple._helpers.cx(d, chart, series)).toFixed(2); })
.y(function (d) { return (dimple._helpers.cy(d, chart, series)).toFixed(2); }),
// Build the point calculator
entryExitCoords = d3.svg.line()
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); }),
entryCoords = d3.svg.line()
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin).toFixed(2); })
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin).toFixed(2); }),
// Build the point calculator
exitCoords = d3.svg.line()
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin).toFixed(2); })
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin).toFixed(2); }),
graded = false,
i,
k,
@ -3780,8 +3784,8 @@ var dimple = {
.append("circle")
.attr("id", function (d) { return d.key; })
.attr("class", markerBackClasses.join(" "))
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin); })
.attr("r", 0)
.attr("fill", "white")
.attr("stroke", "none");
@ -3794,6 +3798,8 @@ var dimple = {
// Remove
rem = addTransition(markerBacks.exit(), duration)
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
.attr("r", 0);
// Run after transition methods
@ -3835,8 +3841,8 @@ var dimple = {
.on("mouseleave", function (e) {
self.leaveEventHandler(e, this, chart, series);
})
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin); })
.attr("r", 0)
.attr("opacity", (series.lineMarkers || lineDataRow.data.length < 2 ? lineDataRow.color.opacity : 0))
.call(function () {
@ -3866,6 +3872,8 @@ var dimple = {
// Remove
rem = addTransition(markers.exit(), duration)
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
.attr("r", 0);
// Run after transition methods
@ -3938,9 +3946,11 @@ var dimple = {
dimple._addGradient(lineData[i].key, "fill-line-gradient-" + lineData[i].keyString, (series.x._hasCategories() ? series.x : series.y), data, chart, duration, "fill");
}
// Get the points that this line will appear
lineData[i].entryExit = entryExitCoords(lineData[i].data);
lineData[i].entry = entryCoords(lineData[i].data);
// Get the actual points of the line
lineData[i].line = lineCoords(lineData[i].data);
lineData[i].update = updateCoords(lineData[i].data);
// Get the actual points of the line
lineData[i].exit = exitCoords(lineData[i].data);
// Add the color in this loop, it can't be done during initialisation of the row becase
// the lines should be ordered first (to ensure standard distribution of colors
lineData[i].color = chart.getColor(lineData[i].key.length > 0 ? lineData[i].key[lineData[i].key.length - 1] : "All");
@ -3965,7 +3975,7 @@ var dimple = {
return className + " dmp-line " + d.keyString;
})
.attr("d", function (d) {
return d.entryExit;
return d.entry;
})
.call(function () {
// Apply formats optionally
@ -3981,13 +3991,13 @@ var dimple = {
// Update
updated = addTransition(theseShapes, duration)
.attr("d", function (d) { return d.line; })
.attr("d", function (d) { return d.update; })
.each(drawMarkerBacks)
.each(drawMarkers);
// Remove
removed = addTransition(theseShapes.exit(), duration)
.attr("d", function (d) { return d.entryExit; })
.attr("d", function (d) { return d.exit; })
.each(drawMarkerBacks)
.each(drawMarkers);

4
dist/dimple.v1.2.0.min.js vendored
View File

File diff suppressed because one or more lines are too long

66
examples/Dual Axis Problem.html Normal file
View File

@ -0,0 +1,66 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var dim = {"width":590,"height":450}; //chart container width
var data = [{"date":"01-02-2010","cost":"11.415679194952766"},{"date":"01-03-2010","cost":"10.81875691467018"},{"date":"01-04-2010","cost":"12.710197879070897"}];
function barplot(id,dim,data)
{
keys = Object.keys(data[0]);
var xcord = keys[0];
var ycord = keys[1];
var svg = dimple.newSvg(id, dim.width, dim.height);
var myChart = new dimple.chart(svg,data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", xcord);
x.addOrderRule(xcord);
x.showGridlines = true;
var y = myChart.addMeasureAxis("y", ycord);
y.showGridlines = true;
y.tickFormat = ',.1f';
var xDummy = myChart.addTimeAxis("x", "date", "%y", "%y");
xDummy.overrideMin = d3.time.format("%y").parse("00");
xDummy.overrideMax = d3.time.format("%y").parse("01");
xDummy.hidden = true;
var s = myChart.addSeries(null, dimple.plot.bar);
var s1 = myChart.addSeries(null, dimple.plot.line);
s1.lineWeight = 3;
s1.lineMarkers = true;
var s3 = myChart.addSeries("Price Break", dimple.plot.line, [xDummy, y]);
s3.data = [
{ "Price Break" : "high", "cost" : 12.71, "date" : "00" }, { "Price Break" : "high", "cost" : 12.71, "date" : "01" },
{ "Price Break" : "avg", "cost" : 11.65, "date" : "00" }, { "Price Break" : "avg", "cost" : 11.65, "date" : "01" },
{ "Price Break" : "low", "cost" : 10.82, "date" : "00" }, { "Price Break" : "low", "cost" : 10.82, "date" : "01" }
];
myChart.draw(1500);
// function addHorizontalLine(value, color) {
// svg
// .append("line")
// .attr("x1", myChart._xPixels())
// .attr("y1", s.y._scale(value))
// .attr("x2", myChart._xPixels() + myChart._widthPixels())
// .attr("y2", s.y._scale(avg))
// .style("stroke", color);
// }
// addHorizontalLine(avg
}
barplot("body",dim,data);
</script>
</div>

4
src/objects/plot/bubble.js
View File

@ -54,10 +54,10 @@
d.zField.join(" ").split(" ").join("_");
})
.attr("cx", function (d) {
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin);
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin);
})
.attr("cy", function (d) {
return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin);
return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin);
})
.attr("r", 0)
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })

40
src/objects/plot/line.js
View File

@ -15,13 +15,17 @@
// the first aggField defines the points and the others define the line
firstAgg = (series.x._hasCategories() || series.y._hasCategories() ? 0 : 1),
// Build the point calculator
lineCoords = d3.svg.line()
.x(function (d) { return dimple._helpers.cx(d, chart, series); })
.y(function (d) { return dimple._helpers.cy(d, chart, series); }),
updateCoords = d3.svg.line()
.x(function (d) { return (dimple._helpers.cx(d, chart, series)).toFixed(2); })
.y(function (d) { return (dimple._helpers.cy(d, chart, series)).toFixed(2); }),
// Build the point calculator
entryExitCoords = d3.svg.line()
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); }),
entryCoords = d3.svg.line()
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin).toFixed(2); })
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin).toFixed(2); }),
// Build the point calculator
exitCoords = d3.svg.line()
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin).toFixed(2); })
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin).toFixed(2); }),
graded = false,
i,
k,
@ -116,8 +120,8 @@
.append("circle")
.attr("id", function (d) { return d.key; })
.attr("class", markerBackClasses.join(" "))
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin); })
.attr("r", 0)
.attr("fill", "white")
.attr("stroke", "none");
@ -130,6 +134,8 @@
// Remove
rem = addTransition(markerBacks.exit(), duration)
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
.attr("r", 0);
// Run after transition methods
@ -171,8 +177,8 @@
.on("mouseleave", function (e) {
self.leaveEventHandler(e, this, chart, series);
})
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin); })
.attr("r", 0)
.attr("opacity", (series.lineMarkers || lineDataRow.data.length < 2 ? lineDataRow.color.opacity : 0))
.call(function () {
@ -202,6 +208,8 @@
// Remove
rem = addTransition(markers.exit(), duration)
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
.attr("r", 0);
// Run after transition methods
@ -274,9 +282,11 @@
dimple._addGradient(lineData[i].key, "fill-line-gradient-" + lineData[i].keyString, (series.x._hasCategories() ? series.x : series.y), data, chart, duration, "fill");
}
// Get the points that this line will appear
lineData[i].entryExit = entryExitCoords(lineData[i].data);
lineData[i].entry = entryCoords(lineData[i].data);
// Get the actual points of the line
lineData[i].line = lineCoords(lineData[i].data);
lineData[i].update = updateCoords(lineData[i].data);
// Get the actual points of the line
lineData[i].exit = exitCoords(lineData[i].data);
// Add the color in this loop, it can't be done during initialisation of the row becase
// the lines should be ordered first (to ensure standard distribution of colors
lineData[i].color = chart.getColor(lineData[i].key.length > 0 ? lineData[i].key[lineData[i].key.length - 1] : "All");
@ -301,7 +311,7 @@
return className + " dmp-line " + d.keyString;
})
.attr("d", function (d) {
return d.entryExit;
return d.entry;
})
.call(function () {
// Apply formats optionally
@ -317,13 +327,13 @@
// Update
updated = addTransition(theseShapes, duration)
.attr("d", function (d) { return d.line; })
.attr("d", function (d) { return d.update; })
.each(drawMarkerBacks)
.each(drawMarkers);
// Remove
removed = addTransition(theseShapes.exit(), duration)
.attr("d", function (d) { return d.entryExit; })
.attr("d", function (d) { return d.exit; })
.each(drawMarkerBacks)
.each(drawMarkers);

44
tmp/dimple.js
View File

@ -3365,10 +3365,10 @@ var dimple = {
d.zField.join(" ").split(" ").join("_");
})
.attr("cx", function (d) {
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin);
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin);
})
.attr("cy", function (d) {
return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin);
return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin);
})
.attr("r", 0)
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
@ -3679,13 +3679,17 @@ var dimple = {
// the first aggField defines the points and the others define the line
firstAgg = (series.x._hasCategories() || series.y._hasCategories() ? 0 : 1),
// Build the point calculator
lineCoords = d3.svg.line()
.x(function (d) { return dimple._helpers.cx(d, chart, series); })
.y(function (d) { return dimple._helpers.cy(d, chart, series); }),
updateCoords = d3.svg.line()
.x(function (d) { return (dimple._helpers.cx(d, chart, series)).toFixed(2); })
.y(function (d) { return (dimple._helpers.cy(d, chart, series)).toFixed(2); }),
// Build the point calculator
entryExitCoords = d3.svg.line()
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); }),
entryCoords = d3.svg.line()
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin).toFixed(2); })
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin).toFixed(2); }),
// Build the point calculator
exitCoords = d3.svg.line()
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin).toFixed(2); })
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin).toFixed(2); }),
graded = false,
i,
k,
@ -3780,8 +3784,8 @@ var dimple = {
.append("circle")
.attr("id", function (d) { return d.key; })
.attr("class", markerBackClasses.join(" "))
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin); })
.attr("r", 0)
.attr("fill", "white")
.attr("stroke", "none");
@ -3794,6 +3798,8 @@ var dimple = {
// Remove
rem = addTransition(markerBacks.exit(), duration)
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
.attr("r", 0);
// Run after transition methods
@ -3835,8 +3841,8 @@ var dimple = {
.on("mouseleave", function (e) {
self.leaveEventHandler(e, this, chart, series);
})
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin); })
.attr("r", 0)
.attr("opacity", (series.lineMarkers || lineDataRow.data.length < 2 ? lineDataRow.color.opacity : 0))
.call(function () {
@ -3866,6 +3872,8 @@ var dimple = {
// Remove
rem = addTransition(markers.exit(), duration)
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
.attr("r", 0);
// Run after transition methods
@ -3938,9 +3946,11 @@ var dimple = {
dimple._addGradient(lineData[i].key, "fill-line-gradient-" + lineData[i].keyString, (series.x._hasCategories() ? series.x : series.y), data, chart, duration, "fill");
}
// Get the points that this line will appear
lineData[i].entryExit = entryExitCoords(lineData[i].data);
lineData[i].entry = entryCoords(lineData[i].data);
// Get the actual points of the line
lineData[i].line = lineCoords(lineData[i].data);
lineData[i].update = updateCoords(lineData[i].data);
// Get the actual points of the line
lineData[i].exit = exitCoords(lineData[i].data);
// Add the color in this loop, it can't be done during initialisation of the row becase
// the lines should be ordered first (to ensure standard distribution of colors
lineData[i].color = chart.getColor(lineData[i].key.length > 0 ? lineData[i].key[lineData[i].key.length - 1] : "All");
@ -3965,7 +3975,7 @@ var dimple = {
return className + " dmp-line " + d.keyString;
})
.attr("d", function (d) {
return d.entryExit;
return d.entry;
})
.call(function () {
// Apply formats optionally
@ -3981,13 +3991,13 @@ var dimple = {
// Update
updated = addTransition(theseShapes, duration)
.attr("d", function (d) { return d.line; })
.attr("d", function (d) { return d.update; })
.each(drawMarkerBacks)
.each(drawMarkers);
// Remove
removed = addTransition(theseShapes.exit(), duration)
.attr("d", function (d) { return d.entryExit; })
.attr("d", function (d) { return d.exit; })
.each(drawMarkerBacks)
.each(drawMarkers);