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

Question

Here's the fiddle .

When I use the brush, the colored areas start off beyond the x axis defined.

For the line in the graph, I got a suggestion in this SO to add clip-path: url(#clip) to the line css. It works. After applying that, the line starts exactly from the 0 of x when using the brush.

But when I apply the same logic to the css of the .area.above and .area.below , it doesn't work.

The areas are clipped correctly but only one is actually displayed...from inspecting the elements in the browser developer tools, one of the areas is apparently overlaying the other.

Some one help me where I'm making the mistake?

Thanks in advance.

Answer 1

Here's a fiddle which I think does what you want: http://jsfiddle.net/henbox/jzPaq/

The problem was that you can only have one clip-path defined for an element. So adding the rectangular clipPath:

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

was over-writing the clip-below and clip-above ones (in <path class="area below"...> and <path class="area above"...> respectively.

The solution I used was based on this info: http://apike.ca/prog_svg_clip.html

For the 'below' I used the intersection of the rectangular (#clip) and 'below' clip paths, like this:

Give the path element an id (clipbelowshape):

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

Create the intersect of clip clipPath with clipbelowshape :

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

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

Use the new intersect clip path

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

Do the same thing with the above path