Javascript 如何更新d3中绑定数据的索引（i）？

第一次输入时，我将数据绑定到svg，如下所示：

var dateContainer = svg.selectAll("g.dateContainerClass")
    .data(dateData, function(d) {
       return d.id
    });

var dateContainerEnter = dateContainer.enter()
    .append("g")
    .attr("class", "dateContainerClass");

此时，绑定数据由一个包含5个条目的数组组成。所以

i

是0到4，从第一到最后。现在数组已更新：两个新条目在0和1之间拼接

dateData.splice((i + 1), 0, rawData[(rawIndex + 1)], rawData[(rawIndex + 2)])

之后，新的

dateData

将再次绑定到所选内容，如上所示。我所期待的是：

i=0 (old)
i=1 (new)
i=2 (new)
i=3 (old)
i=4 (old)
etc.

实际情况是：

i=0 (old)
i=1 (new)
i=2 (new)
i=1 (old)
i=2 (old)
etc.

是我做错了什么，还是这是我期望的行为？任何帮助都将不胜感激

编辑：

添加的代码段： 请全屏运行代码段并单击第1天。检查元素时，

class

“dateflag”的

id

应该每个向上一个，而不是向上一个

var windowWidth=window.innerWidth；
var storyline=d3。选择（“.storyline”）。追加（“svg”）；
函数更新（dateData、rawData）{
console.log（日期数据）
var x=d3.scaleLinear（）
.domain（[0，（dateData.length-1）]）
.范围（[“10%”、“80%”）；
故事情节
.transition（）
.持续时间（500）
.延迟（50）
.attr（“宽度”，（dateData.length*20）+“%”）
.attr（“高度”、“100%”）
var dateFlags=storyline.selectAll（“g.dateflag”）
.数据（日期数据，函数（d，i）{
返回d
});
//进入
var dateFlagsEnter=dateFlags.enter（）
.附加（“g”）
.attr（“类”、“日期标志”）
.attr（“id”，函数（d，i）{
控制台日志（“集装箱ID:+i）
返回i
});
dateFlagsSenter.append（“foreignObject”）
.attr（“类”、“时间点”）
.attr（“宽度”，“130像素”）
.attr（“高度”、“100%”）
.attr（“x”，函数（d，i）{
返回x（i）；
})
.attr（“y”，函数（d，i）{
var上下；
如果（（i%2）==1）{
topBottom=“35%”；
}否则{
topBottom=“40%”；
}
返回上下；
})
.attr（“不透明度”、“0%”）；
dateFlagsEnter.select（“.timePoints”）.append（“xhtml:div”）
.attr（“类”、“tpGroup”）
dateFlagsEnter.select（“.tpGroup”）.append（“xhtml:div”）
.attr（“id”、“日期标签”）
.append（“xhtml:div”）
.html（函数（d，i）{
返回d+“index=“+i；
})
.attr（“id”、“dateLabelText”）
.on（“点击”），功能（d，i）{
var clickIndex=i
日志（“clickedID:+clickIndex”）
展开（日期数据，单击索引）；
});
//更新
dateFlags.merge（dateFlagsEnter）。选择（“.timePoints”）
.transition（）
.持续时间（500）
.延迟（50）
.attr（“x”，函数（d，i）{
返回x（i）；
})
.attr（“不透明度”、“100%”）；
dateFlags.merge（dateFlagsEnter）。选择（“#dateLabelText”）
.html（函数（d）{
返回d；
});
//出口
dateFlags.exit（）.remove（）；
};
函数展开（日期数据，单击索引）{
var lineIndex=clickIndex
dateData.splice（（lineIndex+1），0，“第1.1天”，“第1.2天”）
更新（日期数据）；
};
函数getDateData（）{
var dateData=[“第1天”、“第2天”、“第3天”、“第4天”、“第5天”，]
更新（日期数据）；
};
getDateData（）

当您将
.attr（“id”
设置为一个函数时，该函数将立即执行，并且只执行一次。这意味着，当您将新值插入数据数组时，您还需要重新计算该属性。如果将
.attr（“id”
移动到
.merge
之后，则一切正常工作：


var windowWidth=window.innerWidth；
var storyline=d3。选择（“.storyline”）。追加（“svg”）；
函数更新（dateData、rawData）{
console.log（日期数据）
var x=d3.scaleLinear（）
.domain（[0，（dateData.length-1）]）
.范围（[“10%”、“80%”）；
故事情节
.transition（）
.持续时间（500）
.延迟（50）
.attr（“宽度”，（dateData.length*20）+“%”）
.attr（“高度”、“100%”）
var dateFlags=storyline.selectAll（“g.dateflag”）
.数据（日期数据，函数（d，i）{
返回d
});
//进入
var dateFlagsEnter=dateFlags.enter（）
.附加（“g”）
.attr（“类别”、“日期标志”）；
dateFlagsSenter.append（“foreignObject”）
.attr（“类”、“时间点”）
.attr（“宽度”，“130像素”）
.attr（“高度”、“100%”）
.attr（“x”，函数（d，i）{
返回x（i）；
})
.attr（“y”，函数（d，i）{
var上下；
如果（（i%2）==1）{
topBottom=“35%”；
}否则{
topBottom=“40%”；
}
返回上下；
})
.attr（“不透明度”、“0%”）；
dateFlagsEnter.select（“.timePoints”）.append（“xhtml:div”）
.attr（“类”、“tpGroup”）
dateFlagsEnter.select（“.tpGroup”）.append（“xhtml:div”）
.attr（“id”、“日期标签”）
.append（“xhtml:div”）
.html（函数（d，i）{
返回d+“index=“+i；
})
.attr（“id”、“dateLabelText”）
.on（“点击”），功能（d，i）{
var clickIndex=i
日志（“clickedID:+clickIndex”）
展开（日期数据，单击索引）；
});
//更新
dateFlags.merge（dateFlagsEnter）
.attr（“id”，函数（d，i）{
控制台日志（“集装箱ID:+i）
返回i
})
.选择（“.时间点”）
.transition（）
.持续时间（500）
.延迟（50）
.attr（“x”，函数（d，i）{
返回x（i）；
})
.attr（“不透明度”、“100%”）；
dateFlags.merge（dateFlagsEnter）。选择（“#dateLabelText”）
.html（函数（d）{
返回d；
});
//出口
dateFlags.exit（）.remove（）；
};
函数展开（日期数据，单击索引）{
var lineIndex=clickIndex
dateData.splice（（lineIndex+1），0，“第1.1天”，“第1.2天”）
更新（日期数据）；
};
函数getDateData（）{
var dateData=[“第1天”、“第2天”、“第3天”、“第4天”、“第5天”，]
更新（日期数据）；
};
getDateData（）；
请将您的问题添加为可运行的代码段，以便我们可以在中查看问题action@RubenHelsloot感谢您的建议，我添加了这个示例。我现在认为问题在于，我没有更新最初的svg组“dateflag”，但我不知道如何更新。