javascript - D3.js を使用して svg:g 要素の単純なループ カルーセルを実行する方法

Question

より大きな d3.js 生成チャートの一部であるスクロール可能なリストを作成しようとしています。リスト項目をクリックすると、チャートの残りの変更が有効になります。再利用可能なチャート パターンを使用して、D3.js で svg:g 要素の単純なアニメーション ループ カルーセルをどのように作成しますか?

たとえば、jQuery-mousewheel またはいくつかの進むボタンと戻るボタンに接続されています。

http://jsbin.com/igopix/2/edit

NameLoop = function () {

  var scroll = 0;

  function chart(selection) {
        selection.each(function (data) {
          var len = data.length,
              scroll = scroll % len + len;  // keep scroll between 0 <-> len 

          var nameNodes = d3.select(this).selectAll("g")
                .data(data, function(d){return d.ID;} );

            var nameNodesEnter = nameNodes.enter().append("g")
                .attr("class", "nameNode")
                .attr("transform", function(d, i) { 

                    // implement scroll here ??
                    return "translate(30," + (i+1)*20 + ")"; 
                })
              .append("text")
                .text(function(d){return d.ID;});

        });
        return chart;
    }

    chart.scroll = function(_) {
        if (!arguments.length) return scroll;
        scroll = _;
        return chart;
    };

    return chart;
};

data = [{ID:"A"},{ID:"B"},{ID:"C"},{ID:"D"},{ID:"E"}];

var svg = d3.select("body").append("svg")
    .attr("width", 200)
    .attr("height",200)
    .attr("id","svg");

var nameloop = NameLoop();

d3.select("#svg").datum(data).call(nameloop);

var body = d3.select("body").append("div");
body.append("span").on("click",function(d){ scroll(1)  }).html("forward ");
body.append("span").on("click",function(d){ scroll(-1) }).html("back");