d3.js rotate transform for webkit and mozkit

Question

In following d3.js snippet I am expecting appropriate rotate style to be applied when I use different browser. However the second style always overrides the first one.

   var degrees = Math.floor( Math.random() * 360 );
   box_tr.append('td')
    .attr('id', 'image')
    .append('img')
    .attr('id', 'myimage')
    .attr('src', imgurl)
    .attr('style',"-webkit-transform: rotate(" + degrees + "deg);")
    .attr('style',"-moz-transform: rotate(" + degrees + "deg);");

Is my expectation correct? What are the alternatives?

This was helpful in setting the appropriate style. http://stackoverflow.com/questions/708895/how-to-set-the-style-webkit-transform-dynamically-using-javascript — Manish Sapariya, May 19 '14 at 04:36
If this solved your problem, would you mind posting it as an answer? — Lars Kotthoff, May 19 '14 at 09:06

score 0 · Answer 1 · answered May 19 '14 at 03:58

Try setting the styles, not attributes on the element.

var degrees = Math.floor( Math.random() * 360 );
   box_tr.append('td')
    .attr('id', 'image')
    .append('img')
    .attr('id', 'myimage')
    .attr('src', imgurl)
    .style('-webkit-transform',"rotate(" + degrees + "deg);")
    .style('-moz-transform',"rotate(" + degrees + "deg);");

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

This answer was useful in setting the appropriate style. I set following two styles on the image element itself, when adding the image in DOM.

img.style.webkitTransform = "rotate(180deg)";
img.style.MozTransform = "rotate(180deg)";

edited May 23 '17 at 12:20

Community

1
1

answered May 20 '14 at 04:40

Manish Sapariya

3,575
3
25
34

d3.js rotate transform for webkit and mozkit

2 Answers2