how to stop an animation in d3.js

[hai2...@gmail.com]

Hi,

I am  a naive d3 developer and trying to work on the chart similar to http://bost.ocks.org/mike/nations/.

I have added 2 buttons - start and end. Once i click on the start i call the code to draw the graph and when i click i need to end the animation.

However if i click stop button the transition is not stopping. How do i stop and then restart the animation.

The code is:

<h1>The Wealth & Health of Nations</h1>

<p id="chart"></p>

<input type="submit" value="Start" onclick=start();>

<input type="submit" value="Stop" onclick=stop();>

<script src="http://d3js.org/d3.v2.js?2.8.1"></script>

<script>

// Various accessors that specify the four dimensions of data to visualize.

function x(d) { return d.income; }

function y(d) { return d.lifeExpectancy; }

function radius(d) { return d.population; }

function color(d) { return d.region; }

function key(d) { return d.name; }

var b = false;

var svg = d3.select("#chart");

var chksvg = d3.select("svg");

function start()

{

if(chksvg .empty())

{

      

//alert("not intialised");

     

     document.getElementById('chart').innerHTML="";

      // Chart dimensions.

var margin = {top: 29.5, right: 29.5, bottom: 29.5, left: 59.5},

    width = 960 - margin.right,

    height = 500 - margin.top - margin.bottom;

// Various scales. These domains make assumptions of data, naturally.

var xScale = d3.scale.log().domain([300, 1e5]).range([0, width]),

    yScale = d3.scale.linear().domain([10, 85]).range([height, 0]),

    radiusScale = d3.scale.sqrt().domain([0, 5e8]).range([0, 40]),

    colorScale = d3.scale.category10();

// The x & y axes.

var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(12, d3.format(",d")),

    yAxis = d3.svg.axis().scale(yScale).orient("left");

// Create the SVG container and set the origin.

var svg = d3.select("#chart").append("svg")

.attr("width", width + margin.left + margin.right)

    .attr("height", height + margin.top + margin.bottom)

  .append("g")

    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Add the x-axis.

svg.append("g")

    .attr("class", "x axis")

    .attr("transform", "translate(0," + height + ")")

    .call(xAxis);

// Add the y-axis.

svg.append("g")

    .attr("class", "y axis")

    .call(yAxis);

// Add an x-axis label.

svg.append("text")

    .attr("class", "x label")

    .attr("text-anchor", "end")

    .attr("x", width)

    .attr("y", height - 6)

    .text("income per capita, inflation-adjusted (dollars)");

// Add a y-axis label.

svg.append("text")

    .attr("class", "y label")

    .attr("text-anchor", "end")

    .attr("y", 6)

    .attr("dy", ".75em")

    .attr("transform", "rotate(-90)")

    .text("life expectancy (years)");

// Add the year label; the value is set on transition.

var label = svg.append("text")

    .attr("class", "year label")

    .attr("text-anchor", "end")

    .attr("y", height - 24)

    .attr("x", width)

    .text(2000);

}

else

{

//enableInteraction();

}

//alert("Start Clicked");

// Load the data.

d3.json("nations_new.json", function(nations) {

  // A bisector since many nation's data is sparsely-defined.

  var bisect = d3.bisector(function(d) { return d[0]; });

  // Add a dot per nation. Initialize the data at 2000, and set the colors.

  

  var dot = svg.append("g")

      .attr("class", "dots")

    .selectAll(".dot")

      .data(interpolateData(2000))

    .enter().append("circle")

      .attr("class", "dot")

      .style("fill", function(d) { return colorScale(color(d)); })

      .call(position)

      .sort(order);

  // Add a title.

  dot.append("title")

      .text(function(d) { return d.name; });

  // Add an overlay for the year label.

  var box = label.node().getBBox();

  var overlay = svg.append("rect")

        .attr("class", "overlay")

        .attr("x", box.x)

        .attr("y", box.y)

        .attr("width", box.width)

        .attr("height", box.height);

        //.on("mouseover", enableInteraction);

  // Start a transition that interpolates the data based on year.

  svg.transition()

      .duration(30000)

      .ease("linear")

      .tween("year", tweenYear)

      .each("end", enableInteraction);

  // Positions the dots based on data.

  function position(dot) {

    dot .attr("cx", function(d) { return xScale(x(d)); })

        .attr("cy", function(d) { return yScale(y(d)); })

        .attr("r", function(d) { return radiusScale(radius(d)); });

  }

  // Defines a sort order so that the smallest dots are drawn on top.

  function order(a, b) {

    return radius(b) - radius(a);

  }

  // After the transition finishes, you can mouseover to change the year.

  function enableInteraction() {

    var yearScale = d3.scale.linear()

        .domain([2000, 2009])

        .range([box.x + 10, box.x + box.width - 10])

        .clamp(true);

    // Cancel the current transition, if any.

    svg.transition().duration(0);

    overlay

        .on("mouseover", mouseover)

        .on("mouseout", mouseout)

        .on("mousemove", mousemove)

        .on("touchmove", mousemove);

    function mouseover() {

      label.classed("active", true);

    }

    function mouseout() {

      label.classed("active", false);

    }

    function mousemove() {

      displayYear(yearScale.invert(d3.mouse(this)[0]));

    }

  }

  // Tweens the entire chart by first tweening the year, and then the data.

  // For the interpolated data, the dots and label are redrawn.

  function tweenYear() {

    var year = d3.interpolateNumber(2000, 2009);

    return function(t) { displayYear(year(t)); };

  }

  // Updates the display to show the specified year.

  function displayYear(year) {

    dot.data(interpolateData(year), key).call(position).sort(order);

    label.text(Math.round(year));

  }

  // Interpolates the dataset for the given (fractional) year.

  function interpolateData(year) {

    return nations.map(function(d) {

      return {

        name: d.name,

        region: d.region,

        income: interpolateValues(d.income, year),

        population: interpolateValues(d.population, year),

        lifeExpectancy: interpolateValues(d.lifeExpectancy, year)

      };

    });

  }

  // Finds (and possibly interpolates) the value for the specified year.

  function interpolateValues(values, year) {

    var i = bisect.left(values, year, 0, values.length - 1),

        a = values[i];

    if (i > 0) {

      var b = values[i - 1],

          t = (year - a[0]) / (b[0] - a[0]);

      return a[1] * (1 - t) + b[1] * t;

    }

    return a[1];

  }

});

}

function stop()

{

svg.transition()

      .duration(0);

//alert("stop Clicked");

}

</script>