Jump to content
Search Community

Allgress

Members
  • Posts

    9
  • Joined

  • Last visited

Allgress's Achievements

2

Reputation

  1. You're my hero! Thanks so much!
  2. I'm writing the code to draw bar charts and am using timelinemax to animate the initial transition of the bars from 0 to their height. And it works beautifully in Chrome, but in Firefox and Edge the height attribute isn't animating. Nothing displays at all in IE, but that seems to be a separate problem. I'm having a hard time recreating the exact problem in the code pen, but the pen doesn't animate the height in chrome and doesn't show anything in ff and edge, which is similar. Here is what the actual code looks like. var tl = new TimelineMax(); var delay = 1 / barData.Segments.length; for (var i = 0; i < barData.Segments.length; ++i) { var segPercent = barData.Segments.Count / maxValue; var segHeight = axisHeight * segPercent; var y = startY - segHeight - prevHeight - 1; // - 1 so that bar doesn't overlap axis var segColor = barData.Segments.Color; var bar = document.createElementNS("http://www.w3.org/2000/svg", "rect"); bar.setAttribute("class", "bar-chart-segment"); bar.setAttribute("x", x + (barWidth / 10)); // bar.setAttribute("y", startY - prevHeight - 1); // magic numbers in these lines are for padding bar.setAttribute("width", barWidth - (barWidth / 10)); // bar.setAttribute("height", 0); bar.setAttribute("fill", rgbToHex(segColor.R, segColor.G, segColor.B )); bar.setAttribute("onclick", "showSVGChartDrilldown('" + uoKey + "', '" + barData.DrillDownArgs + "')"); group.appendChild(bar); tl.to(bar, delay,{ y: -segHeight, ease: Power0.easeNone }, i * delay); tl.to(bar, delay, { height: segHeight, ease: Power0.easeNone }, i * delay);
  3. Hey Jack, Thanks for the response! It looks like that link is broken (at least on my end). I just get a page that say "This XML file does not appear to have any style information associated with it. The document tree is shown below."
  4. Thanks a lot for the response OSUblake. Is there a specific bug tracking area or should the see this eventually?
  5. Phew. I separated the problem wedge and js from everything else. You can find it here: http://codepen.io/anon/pen/rWNLKP
  6. The last wedge id it logs is the id of the wedge that's not animating (which is a valid id), then it errors.
  7. I'm making a call to animate a wedge in my chart from one position to another like so: TweenMax.to("#wedgePath_" + id, 1, { morphSVG: data[j].Value[1] }); This for every other wedge in my chart except one, where the wedge doesn't animate and instead just infinitely repeats an error (I'll screen shot the detail and attach it). The "wedgePath" + id matches the id of the wedge in chart. The original path is "M229.8083 276.5665 A185 185 0 0 1 268.2768 233.1447 L220.6919 132.8616 A185 185 0 0 0 124.5208 241.4164 Z" and data[j].Value[1] is "M374 300 A185 185 0 0 1 374 300 L485 300 A185 185 0 1 0 485 300 Z". If I comment out that one call to TweenMax.to the wedge animation doesn't work, but I also don't get any errors. If I comment out that one line, the wedge animation doesn't work, but I also don't get any errors.
×
×
  • Create New...