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：如果您想要解释您的问题，转换会从 start 值转换为 end 值。你需要同时进行转换才能发挥作用。

更新数据时转换clipPath

1 个答案: