Javascript d3js Don'；不要先进入动画

我有一个滑动条显示，我正在尝试设置动画。基本上，水平方向上有两个相邻的条，每个条占总宽度的百分比。随着数字的更改，宽度和x位置将设置动画以反映新的百分比

它工作得很好，只是我不想在项目第一次加载时播放动画，只有当数字改变时。现在，它从项目的左侧射入到位

edit2：以下是片段中的第一个版本：

constd3slidengbar={}；
//数据应该只是一个包含两个数字的数组
//未来：添加对任意数量数字的支持
d3SlidingBar.create=函数创建（el、数据、格式文本）{
const svg=d3.select（el.append（'svg'））
.attr（'class'，'slided-bar\uuuu svg'）
.attr（'width'，'100%”）
.attr（‘高度’、‘100%’）；
append（'g'）
.attr（'class'，'slided-bar\uuuu svg\uuuu-bar'）
//在这里尝试100%，应该可以。
.attr（'width'，el.offsetWidth）
.attr（'高度'，视线外立面）；
如果（数据）更新（el、数据、格式文本）；
};
d3SlidingBar.update=函数更新（el、数据、格式文本）{
//重新计算比例，并渲染数据点
常量刻度=此刻度（el，数据）；
这是指牵引杆（el、秤、数据）；
图号（el、刻度、数据、格式文本）；
};
D3SlidengBar.scale=（el，数据）=>
d3.刻度线（）
.范围（[0，标高偏移网络宽度]）
.domain（[0，data.reduce（（a，b）=>a+b）]）；
D3滑动杆。牵引杆=（标高、刻度、数据）=>{
常数t=d3.transition（）
.期限（450）；
恒定杆高=视线外的标高；
//跟踪钢筋堆放的右侧，以便钢筋可以进一步堆放。
//如果我们有两个以上的酒吧有用。
设最大宽度=0；
常量g=d3.select（el）.selectAll（'.slided-bar\uuuuu svg\uuuu-bar'）；
常量条=g.selectAll（'.slided-bar\uuuu svg\uuuuu-bar'））
.数据（数据）；
bar.enter（）.append（'rect'）
.attr（'class'，（point，ind）=>`slided-bar\uuuuu svg\uuuu-bar slided-bar\uuuuu svg\uuuuu-bar--${ind}）
.attr（'height'，barHeight）
.合并（条）
.过渡（t）
.attr（'width'，point=>scale（point））
.attr（'x'，（点）=>{
const oldGreatestWidth=最大宽度；
最大宽度+=刻度（点）；
返回旧的最大宽度；
});
bar.exit（）.remove（）；
};
//这个函数需要大修，但我不确定如何进行
D3SlidengBar.drawNumbers=（el、比例、数据、格式文本=点=>point）=>{
恒定杆高=视线外的标高；
//跟踪钢筋堆放的右侧，以便钢筋可以进一步堆放。
//条形图位置用于定位文本
常量g=d3.select（el）.selectAll（'.slided-bar\uuuuu svg\uuuu-bar'）；
const number=g.selectAll（'.slided-bar\uuuuuu svg\uuuuuuu number'））
.数据（数据）；
number.enter（）.append（'text'）
.style（'font-size'，条高-10）
.attr（'y'，酒吧高度-10）
.attr（'class'，（point，ind）=>`slided-bar\uuuuu svg\uuuu编号slided-bar\uuuu svg\uuuu编号--${ind}`）
.合并（编号）
.attr（'y'，酒吧高度-10）
.style（'font-size'，条高-10）
.text（点=>格式文本（点））
.attr（'x'，函数xPosition（点，ind）{
返回（索引%2）？
el.offsetWidth-this.getComputedTextLength（）-8
: (0 + 8);
});
//这是为了如果我们想让号码保持在每个酒吧的左边，
//const greatestWidth=0；
//
//…编号。输入。。。
//
//适用于2个以上的酒吧。
//.attr（'x'，（点，索引）=>{
//const oldGreatestWidth=最大宽度；
//最大宽度+=刻度（点）；
//返回oldGreatestWidth+5；
// })
//
number.exit（）.remove（）；
};
让计数=0；
常数数据=[[50,50]，[75,25]；
const formatText=text=>`%${text}`；
常量条=document.getElementById（'bar'））
d3SlidingBar.create（条形图，数据[0]，格式文本）
设置间隔（（）=>{
计数++；
d3SlidingBar.update（条形图，数据[计数%2]，格式文本）
}，1000）

。滑杆容器{
宽度：400px；
高度：50px；
边框：2件纯黑；
背景色：黑色；
位置：绝对位置；
显示：内联块；
}
.滑杆{
身高：100%；
宽度：100%；
}
.滑动条\uuuu svg\uuuuu条--0{
填充：#33708E；
}
.滑杆\uuuu svg\uuuuu杆--1{
填充：#CF8D3A；
}
.滑杆号{
填充物：白色；
字体大小：粗体；
}

好的，我想出来了

  bar
    .transition(t)
    .attr('width', point => scale(point))
    .attr('x', (point) => {
        const oldGreatestWidth = greatestWidth;
        greatestWidth += scale(point);
        return oldGreatestWidth;
    });




bar.enter().append('rect')
    .attr('class', (point, ind) => `sliding-bar__svg__bar sliding-bar__svg__bar--${ind}`)
    .attr('height', barHeight)
    .attr('width', point => scale(point))
    .attr('x', (point) => {
      const oldGreatestWidth = greatestWidth;
      greatestWidth += scale(point);
      return oldGreatestWidth;
    });

基本上，这是我的第二次尝试，但删除了合并（条）行。我不确定merge（）的作用，但我正在做的任何事情似乎都不需要它。我认为这是任何时候我们使用更新模式都需要的，但没有它它工作得很好

---

我认为，如果合并（bar）在Enter（）块的结尾，而不是在中间，那么它仍然有效。

您能将代码更改为StAcExchange片段，这样我们就可以执行它吗？很难想象发生了什么。好了，完成了！请注意，第一次加载时，左侧有一个动画。我宁愿第一次加载时没有动画。