Question

这里是fiddle。

当我使用画笔时，彩色区域开始超出定义的x轴。

对于图表中的行，我收到了in this SO的建议，要求将clip-path: url(#clip)添加到行css中。有用。应用之后，当使用画笔时，该行从x的0开始。

但是当我将相同的逻辑应用于.area.above和.area.below的css时，它并不起作用。

区域被正确剪切但实际只显示了一个区域......通过检查浏览器开发人员工具中的元素，其中一个区域显然覆盖了另一个区域。

有人在我犯错的地方帮助我吗？

提前致谢。

Answer 1

这是一个小提琴，我认为你做了什么：http://jsfiddle.net/henbox/jzPaq/

问题在于您只能为元素定义一个clip-path。所以添加矩形clipPath：

...append("clipPath")
    .attr("id", "clip")
    .append("rect")
        .attr("width", width)
        .attr("height", height);

覆盖了clip-below和clip-above个（分别在<path class="area below"...>和<path class="area above"...>。

我使用的解决方案基于以下信息：http://apike.ca/prog_svg_clip.html

对于'下面'，我使用矩形（#clip）和'下面'剪辑路径的交集，如下所示：

给路径元素一个id （clipbelowshape）：

focus.append("clipPath")
    .attr("id", "clip-below")
    .append("path")
        .attr("id", "clipbelowshape")
        .attr("d", area.y0(height));

使用clip创建clipbelowshape clipPath的交叉：

var clipbelowintersect = focus.append("clipPath")
    .attr("id", "clipbelowintersect")
    .attr("clip-path", "url(#clip)");

clipbelowintersect.append("use")
    .attr("xlink:href", "#clipbelowshape");

使用新的交叉剪辑路径

focus.append("path")
    .attr("class", "area below")
    .attr("clip-path", "url(#clipbelowintersect)")
    .attr("d", area);

使用上述路径做同样的事情

d3 - 画笔范围内所需的帮助（）

1 个答案: