Javascript d3js堆叠条形图中的分页

这是我使用d3.js的堆叠条形图。目前，只有特定数量的条（在我的例子中是4条）是可见的。我希望当我点击下一步按钮时，下一个4是可见的，依此类推。 但是我无法实现这个功能。重画功能未按预期工作 提前感谢您的帮助。 这是我的小提琴：

var数据=[
{
“密钥”：“密钥2”，
“价值观”：[
{“x”：“Cols#21”，“y”：70}，
{“x”：“Cols#9”，“y”：39}，
{“x”：“Cols#8”，“y”：96}，
{“x”：“Cols#16”，“y”：21}，
{“x”：“Cols#43”，“y”：95}，
{“x”：“Cols#49”，“y”：24}，
{“x”：“Cols#23”，“y”：95}，
{“x”：“Cols#89”，“y”：24}，
{“x”：“Cols#55”，“y”：54}，
{“x”：“Cols#65”，“y”：24}
]
},
{
“密钥”：“密钥1”，
“价值观”：[
{“x”：“Cols#21”，“y”：93}，
{“x”：“Cols#9”，“y”：73}，
{“x”：“Cols#8”，“y”：94}，
{“x”：“Cols#16”，“y”：80}，
{“x”：“Cols#43”，“y”：56}，
{“x”：“Cols#49”，“y”：83}，
{“x”：“Cols#23”，“y”：95}，
{“x”：“Cols#89”，“y”：24}，
{“x”：“Cols#55”，“y”：74}，
{“x”：“Cols#65”，“y”：24}
]
},
{
“密钥”：“密钥0”，
“价值观”：[
{“x”：“Cols#21”，“y”：38}，
{“x”：“Cols#9”，“y”：88}，
{“x”：“Cols#8”，“y”：7}，
{“x”：“Cols#16”，“y”：288}，
{“x”：“Cols#43”，“y”：40}，
{“x”：“Cols#49”，“y”：77}，
{“x”：“Cols#23”，“y”：95}，
{“x”：“Cols#89”，“y”：24}，
{“x”：“Cols#55”，“y”：24}，
{“x”：“Cols#65”，“y”：24}
]
}
];
变量温度=[
{
“密钥”：“密钥2”，
“价值观”：[
]
},
{
“密钥”：“密钥1”，
“价值观”：[
]
},
{
“密钥”：“密钥0”，
“价值观”：[
]
}
];
var margin={顶部：40，右侧：10，底部：20，左侧：50}，
宽度=960-margin.left-margin.right，
高度=500-页边距.顶部-页边距.底部，
stack=d3.layout.stack（）.values（函数（d）{返回d.values；}），
totalColumns=0，
p=0，
viewdata，
条数=4，
计数=0；
//计算域中每个x值的总计
变量总数={}；
data.forEach（函数（系列）{
系列值forEach（函数（项）{
总计[item.x]=（总计[item.x]| | 0）+item.y
计数++；
})
})
for（数据中的var k）
{//console.log（“hi”）
对于（i=0；i在更改数据的情况下，您应该使用d3的enter（）和exit（）功能。请参阅下面的教程“”
与同一问题斗争bro。如果您找到答案，请告诉我。
    var data = [
    {
        "key": "Key_2",
        "values": [
            {"x": "Cols # 21",  "y": 70},
            {"x": "Cols # 9",  "y": 39},
            {"x": "Cols # 8",  "y": 96},
            {"x": "Cols # 16",  "y": 21},
            {"x": "Cols # 43",  "y": 95},
            {"x": "Cols # 49",  "y": 24},
            {"x": "Cols # 23",  "y": 95},
            {"x": "Cols # 89",  "y": 24},
            {"x": "Cols # 55",  "y": 54},
            {"x": "Cols # 65",  "y": 24}
        ]
    },
    {
        "key": "Key_1",
        "values": [
            {"x": "Cols # 21",  "y": 93},
            {"x": "Cols # 9",  "y": 73},
            {"x": "Cols # 8",  "y": 94},
            {"x": "Cols # 16",  "y": 80},
            {"x": "Cols # 43",  "y": 56},
            {"x": "Cols # 49",  "y": 83},
            {"x": "Cols # 23",  "y": 95},
            {"x": "Cols # 89",  "y": 24},
            {"x": "Cols # 55",  "y": 74},
            {"x": "Cols # 65",  "y": 24}
        ]
    },

    {
        "key": "Key_0",
        "values": [
            {"x": "Cols # 21",  "y": 38},
            {"x": "Cols # 9",  "y": 88},
            {"x": "Cols # 8",  "y": 7},
            {"x": "Cols # 16",  "y": 288},
            {"x": "Cols # 43",  "y": 40},
            {"x": "Cols # 49",  "y": 77},
            {"x": "Cols # 23",  "y": 95},
            {"x": "Cols # 89",  "y": 24},
            {"x": "Cols # 55",  "y": 24},
            {"x": "Cols # 65",  "y": 24}
        ]
    }
];
var temp = [
    {
        "key": "Key_2",
        "values": [
        ]
    },
    {
        "key": "Key_1",
        "values": [
        ]
    },

    {
        "key": "Key_0",
        "values": [
        ]
    }
];

var margin = {top: 40, right: 10, bottom: 20, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    stack = d3.layout.stack().values(function(d){ return d.values;}),
    totalColumns=0,
    p=0,
    viewdata,
    barCount=4,
    count=0;
//Calulate totals for each x value in the domain
var totals = {};
    data.forEach(function(series){
      series.values.forEach(function(item){
       totals[item.x] = (totals[item.x] || 0 ) + item.y
       count++;
      })
    })

for(var k in data)
    {   //console.log("hi")
        for(i=0;i<barCount;i++)
            {
                temp[k].values.push(data[k].values[i])
            }
    }   
            stack(temp);    
        var yMax = d3.max(temp, function(layer) { return d3.max(layer.values, function(d) { return d.y0 + d.y; }); }),
            keys = temp[0].values.map(function(item){return item.x });




var x = d3.scale.ordinal()
    .domain(keys)
    .rangeRoundBands([0, width], .5);

var y = d3.scale.linear()
    .domain([0, yMax])
    .range([height, 0]);

var color = d3.scale.linear()
    .domain([0, data.length - 1])
    .range(["#00f", "#000"]);

var yAxis = d3.svg.axis()
    .scale(y)
    .tickSize(10)
    .tickPadding(6)
    .orient("left");

totalColumns =count/data.length;
var xAxis = d3.svg.axis()
    .scale(x)
    .tickSize(10)
    .tickPadding(6)
    .orient("bottom");

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom+100)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//viewdata = data.slice(p,2);
var layer = svg.selectAll(".layer")
    .data(temp)
  .enter().append("g")
    .attr("class", "layer")
    .style("fill", function(d, i) { return color(i); });

layer.selectAll("rect")
    .data(function(d){return d.values;})
    .enter().append("rect")
    .attr("fill-opacity", 0.5)
    .attr("stroke", "#000")
    .attr("width",100)
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y0 + d.y); })
    .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });

layer.selectAll("text")
    .data(keys)
    .enter().append("text")
      .text( function(d){return  totals[d];})
      .attr('fill', '#000')
      .style('font-size', 15)
      .attr("x", function(d){ return x(d) + 25})

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

var prev=svg.append("svg:image")
    .attr("xlink:href","http://www.visitliverpool.com/images/button_highlight_prev.gif")
    .attr("id","prev")
    .attr("class","pagingButton")
    .attr("x", -5)
    .attr("y",480)
    .attr("dy", "2.90em")
    .attr("dx", "1.75em")
    .attr("width", 45).attr("height", 25)
    .on("click",onPrevClick)
var next=svg.append("svg:image")
    .attr("xlink:href","http://www.visitliverpool.com/images/button_highlight_next.gif")
    .attr("class","pagingButton")
    .attr("id","next")
    .attr("x", 95)
    .attr("y",480)
    .attr("dy", "2.90em")
    .attr("dx", "1.75em")
    .attr("width", 45).attr("height", 25)
    .on("click",onNextClick)
initial=Math.floor(totalColumns/barCount);
if(totalColumns%barCount==0){
    initial--;
}   
function onNextClick(){
    $("#prev").show();
    emptyTemp();
    initial--;
    if(initial<=0){
        $("#next").hide();
    }
    p+=barCount;
    if(p>=totalColumns){
        //p-=barCount;
        for(var k in temp){
            for(i=p;i<totalColumns;i++){
                temp[k].values.push(data[k].values[i]);
            }
        }
    }
    else{
        //viewdata = data.slice(p,p+barCount);
        for(var k in temp){
            for(i=p;i<p+barCount;i++){
                temp[k].values.push(data[k].values[i]);
            }
        }

    }

    redraw();
}
function emptyTemp(){
    for(var k in temp){
        temp[k].values=[];
    }
}
function onPrevClick(){
    $("#next").show();
    emptyTemp();
    initial++;
    p-=barCount;
    if(p<=0){
        $("#prev").hide();
        p=0;
    }
    else{
        //viewdata = data.slice(p,p+barCount);
        for(var k in temp){
            for(i=p;i<p+barCount;i++){
                temp[k].values.push(data[k].values[i]);
            }
        }

    redraw();
}
}
function redraw(){
var layers = svg.selectAll(".layer")
    .data(temp)
  .enter().append("g")
    .attr("class", "layer")
    .style("fill", function(d, i) { return color(i); });

var rects=layers.selectAll("rect")
    .data(function(d){return d.values;});
    rects.enter()
    .append("rect");
    rects.exit()
    .remove();
    rects
    .attr("fill-opacity", .5)
    .attr("stroke", "#000")
    .attr("width",100)
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y0 + d.y); })
    .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });

layer.selectAll("text")
    .data(keys)
    .enter().append("text")
      .text( function(d){return  totals[d];})
      .attr('fill', '#000')
      .style('font-size', 15)
      .attr("x", function(d){ return x(d) + 25})
}