Javascript 如何使用D3.js实现svg:g元素的简单循环转盘

我试图制作一个可滚动的列表，它是一个更大的d3.js生成的图表的一部分。单击列表项可激活图表其余部分的更改。 如何使用可重用的图表模式，用D3.js制作svg:g元素的简单动画循环转盘

例如，连接到jQuery鼠标滚轮或一些前进和后退按钮

NameLoop=函数（）{
var=0；
功能图（选择）{
选择。每个功能（数据）{
var len=data.length，
滚动=滚动%len+len；//将滚动保持在0 len之间
var nameNodes=d3.select（this.selectAll（“g”）
.data（数据，函数（d）{返回d.ID；}）；
var nameNodesEnter=nameNodes.enter（）.append（“g”）
.attr（“类”、“名称节点”）
.attr（“变换”，函数（d，i）{
//在这里实现滚动？？
返回“translate（30）”+（i+1）*20+”；
})
.append（“文本”）
.text（函数（d）{返回d.ID；}）；
});
收益表；
}
chart.scroll=函数{
如果（！arguments.length）返回滚动条；
滚动=u3;；
收益表；
};
收益表；
};
数据=[{ID:“A”}，{ID:“B”}，{ID:“C”}，{ID:“D”}，{ID:“E”}]；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，200）
.attr（“高度”，200）
.attr（“id”、“svg”）；
var nameloop=nameloop（）；
d3.选择（“#svg”）.datum（data）.call（nameloop）；
var body=d3.选择（“body”）.追加（“div”）；
body.append（“span”）.on（“click”，函数（d）{scroll（1）}.html（“forward”）；
body.append（“span”）.on（“单击”，函数（d）{scroll（-1）}.html（“返回”）；

您拥有的东西有什么不起作用？未定义scroll（）。我不知道实施这样一件事的最佳方式，也不知道把它放在哪里。

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");