D3.js d3图形大小未更新

我正在尝试制作一个实时更新的分组条形图，我从中进行了修改。我希望图形能够随着数组大小的变化反映数据数组的大小，但在我当前的代码中，d3图形停留在数据数组的初始长度上，不会随着数组的增长而增长，当它达到一定长度时，就会受到限制

为什么我能够更新图形中条形的值，但不能随着数据集大小的变化而更改条形的数量

我的代码在下面，在这里

var main=函数（）{
console.log（dataset.toString（））
var a={a:'temp'，b:50+Math.floor（Math.random（）*30）}
VARB={a:'hum'，b:20+Math.floor（Math.random（）*20）}
//添加新元素
数据集推送（a）；
数据集推送（b）；
//限制为8个元素
如果（dataset.length>8）{
dataset.shift（）；
dataset.shift（）；
}
//更新图
更新（数据集）；
}
//下面的数据集将显示6条动画条
//var数据集=[{a:'temp'，b:5}，{a:'hum'，b:8}，{a:'temp'，b:4}，
//{a'hum'，b:9}，{a'temp'，b:15}，{a'hum'，b:12}]；
VarDataSet=[{a:'temp'，b:5}，{a:'hum'，b:8}]；
var w=600；
var h=250；
var xScale=d3.scale.ordinal（）
.domain（d3.range（dataset.length））
.范围圆带（[0，w]，0.1）；
var-rectw=20；
var yScale=d3.scale.linear（）
.domain（[0,80]）
.范围（[0，h]）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var bar=svg.selectAll（“g”）
.数据（数据集）；
barsenter=bar.enter（）
.append（'g'）
.attr（“类”、“条”）；
巴森特
.append（“rect”）
.attr（'class'，'temp'）
.filter（函数（d）{返回d.a=='temp'}）
.attr（“x”，函数（d，i）{
返回（rectw+2）*i*2；
})
.attr（“y”，函数（d）{
返回h-yScale（d.b）；
})
.attr（“宽度”，rectw）
.attr（“高度”，功能（d）{
返回Y刻度（d.b）；
})
.attr（“填充”，功能（d）{
返回“rgb（“+（d.b*4）+”，0，0）”；
});
巴森特
.append（“rect”）
.attr（'class'，'hum'）
.filter（函数（d）{返回d.a=='hum'}）
.attr（“x”，函数（d，i）{
返回rectw+2+（rectw+2）*i*2；
})
.attr（“y”，函数（d）{
返回h-yScale（d.b）；
})
.attr（“宽度”，rectw）
.attr（“高度”，功能（d）{
返回Y刻度（d.b）；
})
.attr（“填充”，功能（d）{
返回“rgb（0，0，+（d.b*5）+”）；
});
//更新功能
变量更新=函数（数据集）{
条。选择（“.temp”）
.数据（数据集）
.filter（函数（d）{返回d.a=='temp'}）
.transition（）
.延迟（功能（d，i）{
返回i/dataset.length*1000；
})
.持续时间（500）
.attr（“y”，函数（d）{
返回h-yScale（d.b）；
})
.attr（“高度”，功能（d）{
返回Y刻度（d.b）；
})
.attr（“填充”，功能（d）{
返回“rgb（“+（d.b*4）+”，0，0）”；
});
条。选择（“.hum”）
.数据（数据集）
.filter（函数（d）{返回d.a=='hum'}）
.transition（）
.延迟（功能（d，i）{
返回i/dataset.length*1000；
})
.持续时间（500）
.attr（“y”，函数（d）{
返回h-yScale（d.b）；
})
.attr（“高度”，功能（d）{
返回Y刻度（d.b）；
})
.attr（“填充”，功能（d）{
返回“rgb（0，0，+（d.b*5）+”）；
});
}
main（）；
setInterval（函数（）{main（）}，1000）；

关于问题： 不随数据集大小的变化而改变条数

当数据集只有两个值时，仅创建一次RECT的原因

barsenter
       .append("rect")

在“更新”部分中，您不是在创建矩形，而是在使用值更新矩形

因此，修复方法是在更新部分也进行追加。

在阅读了描述之后，似乎理解d3的enter（）和exit（）函数是关键

我制作这个片段是为了演示一个带有更新函数的条形图

//主代码
//初始数据
var数据集=[]；
函数填充数组（arr）{
arr.push（{'value'：Math.floor（Math.random（）*50）}）；
}
对于（变量i=0；i<4；i++）{
填充数组（数据集）；
}
//加
var btnfunc=函数（）{
填充数组（数据集）；
//更新图
更新（）；
}
//除去
var btnfunc2=函数（）{
dataset.pop（）
//更新图
更新（）；
}
//随机化
var btnfunc3=函数（）{
对于（var i=0；i

添加
去除
random
到目前为止，我还没能让它发挥作用，你能详细说明应该做什么吗
barsenter
       .append("rect")