tests/mark/transition-anchor.html

<html>
  <head>
    <title>Transition</title>
    <script type="text/javascript" src="../../protovis-d3.2.js"></script>
    <link rel="stylesheet" type="text/css" href="../style.css"/>
  </head>
  <body>
    <input type="button" onclick="start();" value="Start">
    <script type="text/javascript+protovis">

var w = 500,
    h = 500,
    i = 0;

var vis = new pv.Panel()
    .width(w)
    .height(h)
    .margin(30);

var rule = vis.add(pv.Rule)
    .data(function() i & 1 ? [0.25, 0.75] : [0.5])
    .id(function(d) d.toFixed(2))
    .bottom(function(d) d * h);

rule.on("enter")
    .bottom(0)
    .left(0)
    .width(0)
  .on("exit")
    .top(0)
    .left(0)
    .width(0);

rule.anchor("left").add(pv.Label)
    .text(function(d) d.toFixed(2));

vis.render();

function start() {
  i++;
  vis.transition(2500).start();
}

    </script>
  </body>
</html>