0

我正在尝试制作一个可滚动列表，它是更大的 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");
4

0 回答 0