javascript - d3 - required help in brush extent() -


Here it is.

When I use a brush, the area of ​​color defines the X axis.

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

But when I .area.above and .area.below the same code, it does not work

areas Is correctly cut, but by observing the elements in the browser developer tool, only one is displayed ..., apparently overlaying the other in one area.

Help me out where I am making a mistake?

Thank you in advance.

Here's a fiddle which I think is what you want:

The problem was that you can define only one clip-path for an element, then adding the rectangular clippadding:

  ... add ("clippath"). Attr ("id", "clip") .append ("rect") .attr ("width", width) .attr ("height", height); With   

clip-down and clip-up (overwritten in the & lt; path class = "area) Respectively "... & gt; and & lt; Path square = "area above" ... ... gt; .

The solution I made was based on this information:

For 'down' I used the intersection of the rectangular (# clip) and 'bottom' clip path, Such as:

One element of the path element (clipbelowshape):

  focus .append ("clippath") .attr ("id" , "Clip-below") .append ("path") .attr ("Id", "clipbelowshape") .attr ("d", area.y0 (height));   

Create an interaction with the clip / Code> clippath with clipbelowshape :

  Var clipbell oveners = focus .append ("clippath") .attr ("id", "clipbelowintersect") .attr ("clip-path", "url (#clip)"); Clipbelowintersect.append ("use") .attr ("xlink: href", "#clipbelowshape");   

Use the newly created clip path

  focus.app end ("path") .attr ("class" , "Field below") .attr ("clip-path", "url (#clipbelowintersect)") .attr ("d", field);   

Do the same thing with the above path

Comments

Popular posts from this blog

python - Writing Greek in matplotlib labels, titles -

c# - LINQ to Entities does not recognize the method 'Int32 IndexOf(System.String, System.StringComparison)' method -

Pygame memory leak with transform.flip -