Skip to content

Commit 1571010

Browse files
johnkiernanderjohnkiernander
committed
Fixed Axis Transitions
1 parent fadf89c commit 1571010

14 files changed

Lines changed: 336 additions & 148 deletions

‎dist/dimple.v1.2.0.js‎

Lines changed: 60 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -604,7 +604,7 @@ var dimple = {
604604
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-shapes
605605
this.shapes = null;
606606
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-ease
607-
this.ease = "linear";
607+
this.ease = "cubic-in-out";
608608
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-staggerDraw
609609
this.staggerDraw = false;
610610

@@ -677,9 +677,9 @@ var dimple = {
677677
var returnValue = 0;
678678
if (series && chart.staggerDraw) {
679679
if (series.x._hasCategories()) {
680-
returnValue = (dimple._helpers.cx(d, chart, series) / chart._widthPixels()) * (duration / 2);
680+
returnValue = (dimple._helpers.cx(d, chart, series) / chart._widthPixels()) * duration;
681681
} else if (series.y._hasCategories()) {
682-
returnValue = (1 - dimple._helpers.cy(d, chart, series) / chart._heightPixels()) * (duration / 2);
682+
returnValue = (1 - dimple._helpers.cy(d, chart, series) / chart._heightPixels()) * duration;
683683
}
684684
}
685685
return returnValue;
@@ -1515,14 +1515,45 @@ var dimple = {
15151515
transform = null,
15161516
gridSize = 0,
15171517
gridTransform = null,
1518-
handleTrans,
15191518
rotated = false,
15201519
widest = 0,
15211520
box = { l: null, t: null, r: null, b: null },
15221521
titleX = 0,
15231522
titleY = 0,
15241523
rotate = "",
1525-
chart = this;
1524+
chart = this,
1525+
handleTrans = function (ob) {
1526+
// Draw the axis
1527+
// This code might seem unnecessary but even applying a duration of 0 to a transition will cause the code to execute after the
1528+
// code below and precedence is important here.
1529+
var returnObj;
1530+
if (transform === null || duration === 0 || firstDraw) {
1531+
returnObj = ob;
1532+
} else {
1533+
returnObj = chart._handleTransition(ob, duration, chart);
1534+
}
1535+
return returnObj;
1536+
},
1537+
transformLabels = function () {
1538+
if (!axis.measure) {
1539+
if (axis.position === "x") {
1540+
d3.select(this).selectAll("text").attr("x", (chartWidth / axis._max) / 2);
1541+
} else if (axis.position === "y") {
1542+
d3.select(this).selectAll("text").attr("y", -1 * (chartHeight / axis._max) / 2);
1543+
}
1544+
}
1545+
if (axis.categoryFields && axis.categoryFields.length > 0) {
1546+
// Off set the labels to counter the transform. This will put the labels along the outside of the chart so they
1547+
// don't interfere with the chart contents
1548+
if (axis === firstX && (firstY.categoryFields === null || firstY.categoryFields.length === 0)) {
1549+
d3.select(this).selectAll("text").attr("y", chartY + chartHeight - firstY._scale(0) + 9);
1550+
}
1551+
if (axis === firstY && (firstX.categoryFields === null || firstX.categoryFields.length === 0)) {
1552+
d3.select(this).selectAll("text").attr("x", -1 * (firstX._scale(0) - chartX) - 9);
1553+
}
1554+
}
1555+
};
1556+
15261557
if (axis.gridlineShapes === null) {
15271558
if (axis.showGridlines || (axis.showGridlines === null && !axis._hasCategories() && ((!xGridSet && axis.position === "x") || (!yGridSet && axis.position === "y")))) {
15281559
// Add a group for the gridlines to allow css formatting
@@ -1569,48 +1600,29 @@ var dimple = {
15691600
gridTransform = transform = "translate(" + (axis === firstY ? chartX : chartX + chartWidth) + ", 0)";
15701601
gridSize = -chartWidth;
15711602
}
1572-
// Draw the axis
1573-
// This code might seem unneccesary but even applying a duration of 0 to a transition will cause the code to execute after the
1574-
// code below and precedence is important here.
1575-
handleTrans = function (ob) {
1576-
var returnObj;
1577-
if (transform === null || duration === 0 || firstDraw) {
1578-
returnObj = ob;
1579-
} else {
1580-
returnObj = chart._handleTransition(ob, duration, chart);
1581-
}
1582-
return returnObj;
1583-
};
15841603
if (transform !== null && axis._draw !== null) {
15851604

15861605
// Add a tick format
15871606
if (axis._hasTimeField()) {
1588-
handleTrans(axis.shapes).call(axis._draw.ticks(axis._getTimePeriod(), axis.timeInterval).tickFormat(axis._getFormat())).attr("transform", transform);
1607+
handleTrans(axis.shapes)
1608+
.call(axis._draw.ticks(axis._getTimePeriod(), axis.timeInterval).tickFormat(axis._getFormat()))
1609+
.attr("transform", transform)
1610+
.each(transformLabels);
15891611
} else if (axis.useLog) {
1590-
handleTrans(axis.shapes).call(axis._draw.ticks(4, axis._getFormat())).attr("transform", transform);
1612+
handleTrans(axis.shapes)
1613+
.call(axis._draw.ticks(4, axis._getFormat()))
1614+
.attr("transform", transform)
1615+
.each(transformLabels);
15911616
} else {
1592-
handleTrans(axis.shapes).call(axis._draw.tickFormat(axis._getFormat())).attr("transform", transform);
1617+
handleTrans(axis.shapes)
1618+
.call(axis._draw.tickFormat(axis._getFormat()))
1619+
.attr("transform", transform)
1620+
.each(transformLabels);
15931621
}
15941622
if (axis.gridlineShapes !== null) {
1595-
handleTrans(axis.gridlineShapes).call(axis._draw.tickSize(gridSize, 0, 0).tickFormat("")).attr("transform", gridTransform);
1596-
}
1597-
// Move labels around
1598-
if (axis.measure === null || axis.measure === undefined) {
1599-
if (axis.position === "x") {
1600-
handleTrans(axis.shapes.selectAll("text")).attr("x", (chartWidth / axis._max) / 2);
1601-
} else if (axis.position === "y") {
1602-
handleTrans(axis.shapes.selectAll("text")).attr("y", -1 * (chartHeight / axis._max) / 2);
1603-
}
1604-
}
1605-
if (axis.categoryFields !== null && axis.categoryFields !== undefined && axis.categoryFields.length > 0) {
1606-
// Off set the labels to counter the transform. This will put the labels along the outside of the chart so they
1607-
// don't interfere with the chart contents
1608-
if (axis === firstX && (firstY.categoryFields === null || firstY.categoryFields.length === 0)) {
1609-
handleTrans(axis.shapes.selectAll("text")).attr("y", chartY + chartHeight - firstY._scale(0) + 9);
1610-
}
1611-
if (axis === firstY && (firstX.categoryFields === null || firstX.categoryFields.length === 0)) {
1612-
handleTrans(axis.shapes.selectAll("text")).attr("x", -1 * (firstX._scale(0) - chartX) - 9);
1613-
}
1623+
handleTrans(axis.gridlineShapes)
1624+
.call(axis._draw.tickSize(gridSize, 0, 0).tickFormat(""))
1625+
.attr("transform", gridTransform);
16141626
}
16151627
}
16161628
// Set some initial css values
@@ -2551,9 +2563,11 @@ var dimple = {
25512563
}
25522564
this.storyLabel
25532565
.transition().duration(duration * 0.2)
2566+
.ease(this.chart.ease)
25542567
.attr("opacity", 0);
25552568
this.storyLabel
25562569
.transition().delay(duration * 0.2)
2570+
.ease(this.chart.ease)
25572571
.attr("class", "dimple-storyboard-label")
25582572
.text(this.categoryFields.join("\\") + ": " + this.getFrameValue())
25592573
.transition().duration(duration * 0.8)
@@ -2930,7 +2944,7 @@ var dimple = {
29302944
if (!catPoints[areaData[i].group]) {
29312945
catPoints[areaData[i].group] = {};
29322946
}
2933-
catPoints[areaData[i].group][areaData[i].points[areaData[i].points.length - 1][catCoord]] = series[valCoord]._previousOrigin;
2947+
catPoints[areaData[i].group][areaData[i].points[areaData[i].points.length - 1][catCoord]] = series[valCoord]._origin;
29342948
}
29352949
}
29362950
points = areaData[i].points;
@@ -2944,13 +2958,13 @@ var dimple = {
29442958
x : 2 * points[points.length - 1].x - points[points.length - 2].x,
29452959
y : points[points.length - 1].y
29462960
});
2947-
catPoints[areaData[i].group][points[points.length - 1][catCoord]] = series[valCoord]._previousOrigin;
2961+
catPoints[areaData[i].group][points[points.length - 1][catCoord]] = series[valCoord]._origin;
29482962
} else if (series.y._hasCategories()) {
29492963
points = [{
29502964
x : points[0].x,
29512965
y : 2 * points[0].y - points[1].y
29522966
}].concat(points);
2953-
catPoints[areaData[i].group][points[0][catCoord]] = series[valCoord]._previousOrigin;
2967+
catPoints[areaData[i].group][points[0][catCoord]] = series[valCoord]._origin;
29542968
// The prepend above breaks the reference so it needs to be reapplied here.
29552969
areaData[i].points = points;
29562970
}
@@ -3083,12 +3097,8 @@ var dimple = {
30833097
.enter()
30843098
.append("path")
30853099
.attr("id", function (d) { return d.key; })
3086-
.attr("class", function (d) {
3087-
return className + " dimple-line " + d.keyString;
3088-
})
3089-
.attr("d", function (d) {
3090-
return d.entry;
3091-
})
3100+
.attr("class", function (d) { return className + " dimple-line " + d.keyString; })
3101+
.attr("d", function (d) { return d.entry; })
30923102
.call(function () {
30933103
// Apply formats optionally
30943104
if (!chart.noFormats) {
@@ -3443,7 +3453,8 @@ var dimple = {
34433453
return d3.svg.line()
34443454
.x(function (d) { return (series.x._hasCategories() || !originProperty ? d.x : series.x[originProperty]); })
34453455
.y(function (d) { return (series.y._hasCategories() || !originProperty ? d.y : series.y[originProperty]); })
3446-
.interpolate(inter);
3456+
.interpolate(inter)
3457+
.tension(series.interpolationTe);
34473458
};
34483459

34493460
// Handle the special interpolation handling for step

‎dist/dimple.v1.2.0.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/advanced_bar_scroll.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!----------------------------------------------------------------->
2+
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
3+
<!----------------------------------------------------------------->
4+
<div id="chartContainer">
5+
<script src="/lib/d3.v3.min.js"></script>
6+
<script src="/dist/dimple.v1.2.0.js"></script>
7+
<script type="text/javascript">
8+
// Start off with a couple of rows of data
9+
var data = [
10+
{ "Date": Date.now(), "Value": 2000000 * Math.random() }
11+
];
12+
var svg = dimple.newSvg("#chartContainer", 590, 400);
13+
var myChart = new dimple.chart(svg, [].concat(data));
14+
myChart.setBounds(60, 50, 480, 250)
15+
x = myChart.addTimeAxis("x", "Date", null, "%d/%m/%Y");
16+
myChart.addMeasureAxis("y", "Value");
17+
myChart.addSeries("Sales", dimple.plot.bar);
18+
myChart.ease = "linear";
19+
window.setInterval(function () {
20+
// Let 60 bars accumulate and then start slicing them off the front
21+
if (data.length > 60) { data = data.slice(1); }
22+
// Keep a day's gap at each end of the axis
23+
x.overrideMin = data[0]["Date"] - 86400000;
24+
x.overrideMax = data[data.length - 1]["Date"] + 86400000;
25+
data.push({
26+
"Date": data[data.length - 1]["Date"] + 86400000,
27+
"Value": 2000000 * Math.random() });
28+
// Update the data, using a clone to maintain order
29+
myChart.data = [].concat(data);
30+
// Draw with an animation. Each bar will take 1 second to draw and a new
31+
// one is added every 500ms so there will be a few animating at once
32+
myChart.draw(1000);
33+
}, 500);
34+
</script>
35+
</div>

‎examples/animate_bounce_stagger.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!----------------------------------------------------------------->
2+
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
3+
<!----------------------------------------------------------------->
4+
<div id="chartContainer">
5+
<script src="/lib/d3.v3.min.js"></script>
6+
<script src="/dist/dimple.v1.2.0.js"></script>
7+
<script type="text/javascript">
8+
var svg = dimple.newSvg("#chartContainer", 590, 400);
9+
d3.tsv("/data/example_data.tsv", function (data) {
10+
var myChart = new dimple.chart(svg, data);
11+
myChart.setBounds(60, 50, 480, 280)
12+
var x = myChart.addCategoryAxis("x", "Month");
13+
x.addOrderRule("Date");
14+
myChart.addMeasureAxis("y", "Unit Sales");
15+
myChart.addSeries("Owner", dimple.plot.bar);
16+
17+
// Set the ease to bounce and stagger drawing so that
18+
// each bar is offset from the bar before
19+
myChart.ease = "bounce"
20+
myChart.staggerDraw = true;
21+
22+
myChart.addLegend(200, 10, 380, 20, "right");
23+
myChart.draw(800);
24+
});
25+
</script>
26+
</div>

‎examples/animate_elastic_bubbles.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!----------------------------------------------------------------->
2+
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
3+
<!----------------------------------------------------------------->
4+
<div id="chartContainer">
5+
<script src="/lib/d3.v3.min.js"></script>
6+
<script src="/dist/dimple.v1.2.0.js"></script>
7+
<script type="text/javascript">
8+
var svg = dimple.newSvg("#chartContainer", 590, 400);
9+
d3.tsv("/data/example_data.tsv", function (data) {
10+
var myChart = new dimple.chart(svg, data);
11+
myChart.setBounds(60, 80, 480, 260)
12+
myChart.addMeasureAxis("x", "Price");
13+
myChart.addMeasureAxis("y", "Distribution");
14+
myChart.addMeasureAxis("z", "Sales Value");
15+
myChart.addSeries(["SKU", "Channel", "Owner"], dimple.plot.area);
16+
myChart.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble);
17+
myChart.addLegend(200, 10, 380, 20, "right");
18+
myChart.setStoryboard("Date");
19+
myChart.ease = "elastic";
20+
myChart.draw(1000);
21+
myChart.legends = [];
22+
});
23+
</script>
24+
</div>

‎examples/templates/advanced_bar_scroll.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<div id="chartContainer">
2+
<script src="/lib/d3.v3.min.js"></script>
3+
<script src="/dist/dimple.{version}.js"></script>
4+
<script type="text/javascript">
5+
// Start off with a couple of rows of data
6+
var data = [
7+
{ "Date": Date.now(), "Value": 2000000 * Math.random() }
8+
];
9+
var svg = dimple.newSvg("#chartContainer", 590, 400);
10+
var myChart = new dimple.chart(svg, [].concat(data));
11+
myChart.setBounds(60, 50, 480, 250)
12+
x = myChart.addTimeAxis("x", "Date", null, "%d/%m/%Y");
13+
myChart.addMeasureAxis("y", "Value");
14+
myChart.addSeries("Sales", dimple.plot.bar);
15+
myChart.ease = "linear";
16+
window.setInterval(function () {
17+
// Let 60 bars accumulate and then start slicing them off the front
18+
if (data.length > 60) { data = data.slice(1); }
19+
// Keep a day's gap at each end of the axis
20+
x.overrideMin = data[0]["Date"] - 86400000;
21+
x.overrideMax = data[data.length - 1]["Date"] + 86400000;
22+
data.push({
23+
"Date": data[data.length - 1]["Date"] + 86400000,
24+
"Value": 2000000 * Math.random() });
25+
// Update the data, using a clone to maintain order
26+
myChart.data = [].concat(data);
27+
// Draw with an animation. Each bar will take 1 second to draw and a new
28+
// one is added every 500ms so there will be a few animating at once
29+
myChart.draw(1000);
30+
}, 500);
31+
</script>
32+
</div>

‎examples/templates/animate_bounce_stagger.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div id="chartContainer">
2+
<script src="/lib/d3.v3.min.js"></script>
3+
<script src="/dist/dimple.{version}.js"></script>
4+
<script type="text/javascript">
5+
var svg = dimple.newSvg("#chartContainer", 590, 400);
6+
d3.tsv("/data/example_data.tsv", function (data) {
7+
var myChart = new dimple.chart(svg, data);
8+
myChart.setBounds(60, 50, 480, 280)
9+
var x = myChart.addCategoryAxis("x", "Month");
10+
x.addOrderRule("Date");
11+
myChart.addMeasureAxis("y", "Unit Sales");
12+
myChart.addSeries("Owner", dimple.plot.bar);
13+
myChart.ease = "bounce"
14+
myChart.staggerDraw = true;
15+
myChart.addLegend(200, 10, 380, 20, "right");
16+
myChart.draw(800);
17+
});
18+
</script>
19+
</div>

‎examples/templates/animate_elastic_bubbles.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<div id="chartContainer">
2+
<script src="/lib/d3.v3.min.js"></script>
3+
<script src="/dist/dimple.{version}.js"></script>
4+
<script type="text/javascript">
5+
var svg = dimple.newSvg("#chartContainer", 590, 400);
6+
d3.tsv("/data/example_data.tsv", function (data) {
7+
var myChart = new dimple.chart(svg, data);
8+
myChart.setBounds(60, 80, 480, 260)
9+
myChart.addMeasureAxis("x", "Price");
10+
myChart.addMeasureAxis("y", "Distribution");
11+
myChart.addMeasureAxis("z", "Sales Value");
12+
myChart.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble);
13+
myChart.addLegend(200, 10, 380, 20, "right");
14+
myChart.setStoryboard("Date");
15+
myChart.ease = "elastic";
16+
myChart.draw(1000);
17+
myChart.legends = [];
18+
});
19+
</script>
20+
</div>

‎src/objects/chart/begin.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-shapes
3232
this.shapes = null;
3333
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-ease
34-
this.ease = "linear";
34+
this.ease = "cubic-in-out";
3535
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-staggerDraw
3636
this.staggerDraw = false;
3737

‎src/objects/chart/methods/_getDelay.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
var returnValue = 0;
77
if (series && chart.staggerDraw) {
88
if (series.x._hasCategories()) {
9-
returnValue = (dimple._helpers.cx(d, chart, series) / chart._widthPixels()) * (duration / 2);
9+
returnValue = (dimple._helpers.cx(d, chart, series) / chart._widthPixels()) * duration;
1010
} else if (series.y._hasCategories()) {
11-
returnValue = (1 - dimple._helpers.cy(d, chart, series) / chart._heightPixels()) * (duration / 2);
11+
returnValue = (1 - dimple._helpers.cy(d, chart, series) / chart._heightPixels()) * duration;
1212
}
1313
}
1414
return returnValue;

0 commit comments

Comments
 (0)