何らかの理由で、トランジションを追加すると、2 つの clipPath が壊れます。これは完全に機能します：
// Append path first
var svg = d3.select(this).selectAll("svg").data([data]);
var gEnter = svg.enter().append("svg").append("g");
gEnter.append("clipPath").attr("class", "above").attr("id", "clip-above").append("path");
gEnter.append("clipPath").attr("class", "below").attr("id", "clip-below").append("path");
// Later, attach data
var g = svg.select("g")
g.select("#clip-above path").attr("d", area.y0(0));
g.select("#clip-below path").attr("d", area.y0(height));
しかし、トランジションを追加すると、領域全体が次のように色付けされarea-belowます。
// Later, attach data
var g = svg.select("g")
g.select("#clip-above path").transition().duration(500).attr("d", area.y0(0));
g.select("#clip-below path").transition().duration(500).attr("d", area.y0(height));
何が起こっているのか分かりますか？