當(dāng)您設(shè)置.attr("id"一個(gè)函數(shù)時(shí)，該函數(shù)會(huì)立即執(zhí)行，并且僅執(zhí)行一次。這意味著當(dāng)您將新值插入數(shù)據(jù)數(shù)組時(shí)，您還需要重新計(jì)算該屬性。如果您移動(dòng).attr("id"到之后.merge，一切都會(huì)按預(yù)期進(jìn)行：
var windowWidth = window.innerWidth;
var storyline = d3.select(".Storyline").append("svg");
function update(dateData, rawData) {
console.log(dateData)
var x = d3.scaleLinear()
.domain([0, (dateData.length - 1)])
.range(["10%", "80%"]);
storyline
.transition()
.duration(500)
.delay(50)
.attr("width", (dateData.length * 20) + "%")
.attr("height", "100%")
var dateFlags = storyline.selectAll("g.dateflag")
.data(dateData, function(d, i) {
return d
});
//ENTER
var dateFlagsEnter = dateFlags.enter()
.append("g")
.attr("class", "dateflag");
dateFlagsEnter.append("foreignObject")
.attr("class", "timePoints")
.attr("width", "130px")
.attr("height", "100%")
.attr("x", function(d, i) {
return x(i);
})
.attr("y", function(d, i) {
var topBottom;
if ((i % 2) == 1) {
topBottom = "35%";
} else {
topBottom = "40%";
}
return topBottom;
})
.attr("opacity", "0%");
dateFlagsEnter.select(".timePoints").append("xhtml:div")
.attr("class", "tpGroup")
dateFlagsEnter.select(".tpGroup").append("xhtml:div")
.attr("id", "dateLabel")
.append("xhtml:div")
.html(function(d, i) {
return d + " index= " + i;
})
.attr("id", "dateLabelText")
.on("click", function(d, i) {
var clickIndex = i
console.log("clickedID: " + clickIndex)
expand(dateData, clickIndex);
});
//UPDATE
dateFlags.merge(dateFlagsEnter)
.attr("id", function(d, i) {
console.log("ContainerID: " + i)
return i
})
.select(".timePoints")
.transition()
.duration(500)
.delay(50)
.attr("x", function(d, i) {
return x(i);
})
.attr("opacity", "100%");
dateFlags.merge(dateFlagsEnter).select("#dateLabelText")
.html(function(d) {
return d;
});
//EXIT
dateFlags.exit().remove();
};
function expand(dateData, clickIndex) {
var lineIndex = clickIndex
dateData.splice((lineIndex + 1), 0, "Day1.1", "Day1.2")
update(dateData);
};
function getDateData() {
var dateData = ["Day1", "Day2", "Day3", "Day4", "Day5", ]
update(dateData);
};
getDateData();
<div class="Storyline"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
