1 Reply Latest reply on Jan 21, 2014 11:01 AM by Runkle

    Using d3js with Edge Animate - problems with axis

    DeanSM

      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

        • 1. Re: Using d3js with Edge Animate - problems with axis
          Runkle

          I'm afraid I can't help with your question, but if you wouldn't mind explaining how you were able to get the d3 graph to display within the animate div(rectangle)?

           

          I'm trying to have a graph drawn by d3 within 'placeholder(timelined div)' which I then can animate with edge. You seem to got pretty close to what I wanted to achieve but folllowing what ou have done above I can't get the d3 graph to display. Do you have an example of what you did?