I have been working to include d3 data representations (see http://d3js.org) in Edge Animate.
All worked quite well until I needed a graph axis. If the d3 selected the body in the HTML fine, but selecting the Stage and the axis would not position, at least not in Safari or Chrome but ok in Firefox.
What I discovered was as follows: In webkit browsers Animate produces '-webkit-transform: matrix(1, 0, 0, 1, 0, 0)' as a computed style for all layers in the document. d3 axis uses transform: translate to move the axis into place and this does not work alongside the matrix transform. So Ineeded to reset the transform to none for the axis.
I did this as follows and would be interested if there is a better way:
In document.compositionReady
$('head').append('<link rel="stylesheet" href="styleD3.css" type="text/css" />');
In styleD3.css
.axis, .axis g{
-webkit-transform: none;
}
I have a rectangle in a div on the stage so selected from d3 by:
var svg = d3.select("#Stage_Rectangle")
.append("svg")
.attr("width", w)
.attr("height", h);
This worked and I was able to animate the Rectangle whilst d3 animated the graphs within.
Has anyone else tried integrating d3 with Animate? and has a better method? The above seems clumsy to me.
Also why does animate inpose -webkit-transform: matrix(1, 0, 0, 1, 0, 0) when not transforming the Stage or items on it?
Thanks
Dean