Skip to content

Instantly share code, notes, and snippets.

@rbu

rbu/gauge.svg

Created January 13, 2015 15:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rbu/6cda4f71909d0f5e4f11 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rbu/6cda4f71909d0f5e4f11 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rbu created this gist Jan 13, 2015.
    46 changes: 46 additions & 0 deletions gauge.svg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    88 changes: 88 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
    <script>

    $(function() {
    window.svgs = [];
    window.embeds = [];

    var second = 1000;

    function empty() {
    $(".playground").empty();
    }

    function removeFirst() {
    /*
    // @D3 Workaround:
    // This piece of code makes it less like that the problem occurs
    // does not reliably prevent it. There is still a race condition between
    // element DOM removal and d3.timer.stop() actually running (at which point
    // the DOM node can already be inaccessible)
    function stopAnimationOnSvg(svg) {
    svg.select('#logo').interrupt().transition();
    d3.timer.flush();
    }
    stopAnimationOnSvg(window.svgs[0]);
    */

    $(".playground").children().first().remove();
    }

    function render() {
    var embed = document.createElement("embed")
    embed.className = 'gauge-svg'
    embed.setAttribute("src", "gauge.svg")
    embed.setAttribute("type", "image/svg+xml")
    embed = $(embed);

    $(".playground").append(embed);
    embed[0].onload = function() {
    didLoadSvg(embed);
    };
    }

    function didLoadSvg(embed) {
    var svg = d3.select(embed[0].getSVGDocument());
    svgs.push(svg);
    // @D3: Workaround commenting this in keeps a reference and does not trigger the bug
    //embeds.push(embed[0]);
    svg.select('#logo')
    .transition()
    .duration(5*second)
    .attr('transform', function(d, i) {
    return "translate(100,100) rotate (180) scale(2)";
    });
    }

    var startLoading = new Date();
    function clock() {
    now = new Date();
    difference = (now - startLoading) / 1000;
    $('.clock').text(difference);
    }
    window.clockInterval = setInterval(clock, 10);
    window.onerror = function(e) {
    clearInterval(window.clockInterval);
    $('.clock').append("... got Exception: " + e + '. ')
    }

    setTimeout(render, 0)
    setTimeout(removeFirst, 1*second)

    // @D3: Comment in this line to see that future animations also do not run
    // setTimeout(render, 4000)
    });

    </script>
    </head>
    <body>
    <div class="clock"></div>
    <div class="playground"></div>
    </body>
    </html>