javascript - 更新数据时转换 clipPath

Question

这是 this 的延续问题。

这是代码:Plunker

我现在想做的是更新 clipPath 与其他所有内容一致，我无法安静地弄清楚

我尝试了各种方法让它以平滑的方式转换，但每次都得到相同的结果。plunker中使用的方法如下:

defs.append("clipPath")
  .attr("id", "clip-above")
.append("rect");

g.selectAll("#clip-above>rect")
  .transition().duration(durations)
  .attr("width", width)
  .attr("height", y(1));

但无论我使用什么方法，clipPath 都只是跳转到新计算的区域。

Answer 1

我不明白为什么要删除并重新附加 <clipPath>每次运行 update功能。此外，还有许多其他应该更改的内容:例如。你为什么使用 d3.csv在update里面功能？因此，我建议您在 Code Review 上发布此代码, 因此我们可以建议适当的更改(这样的问题在 S.O. 不属于主题)。

回到你的问题:

附加 <clipPath>外面update功能:

var defs = g.append("defs");

var clipAbove = defs.append("clipPath")
    .attr("id", "clip-above");

var clipAboveRect = clipAbove.append("rect")
    .attr("width", width)
    .attr("height", 0);

var clipBelow = defs.append("clipPath")
    .attr("id", "clip-below");

var clipBelowRect = clipBelow.append("rect")
    .attr("y", 0)
    .attr("width", width)
    .attr("height", 0);

并且，在函数中，只需进行转换:

clipAboveRect.transition().duration(durations)
    .attr("height", y(1));

clipBelowRect.transition().duration(durations)
    .attr("y", y(1))
    .attr("height", height - y(1));

这是更新的 Plunker:https://plnkr.co/edit/XcQOvupaS3hLU136blUk?p=preview

PS:如果你想对你的问题进行解释，从开始值到结束值的转换。您需要同时具备这两个条件才能进行过渡。