-1

I have a multiline graph. The zooming is working fine except that when I zoom in, the lines get out of the graph and I want to fix that. Also, I don't know why the dates on my xAxis stay static and doesn't change respectively when I zoom in.
My code for the brush and zoom functions:

function brushed() {
          if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return;

          var s = d3.event.selection || x2.range();

          x.domain(s.map(x2.invert, x2));

          plot.selectAll(".line")
            .attr("d", function(d) { return line(d.values); })
            .style("stroke", function(d) { return color(d.name); });
          plot.select(".axis--x").call(xAxis);

          svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
              .scale(width / (s[1] - s[0]))
              .translate(-s[0], 0));
        }

        function zoomed() {
          if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return;

          var t = d3.event.transform;

          x.domain(t.rescaleX(x2).domain());

          plot.selectAll(".line")
            .attr("d", function(d) { return line(d.values); })
            .style("stroke", function(d) { return color(d.name); });
          plot.select(".axis--x").call(xAxis);

          slider.select(".brush").call(brush.move, x.range().map(t.invertX, t));
        }

An image of my graph: You can see the lines that get out of the graph. [Edit]
Here's a plunker with my whole code.
Thank you in advance.

user9026955
  • 35
  • 8

1 Answers1

1

try this (add line 195 of your code on plunker) : 

country.append("path")
          .attr('clip-path', 'url(#clip)')

You need to apply the clip to the lines (or anything else) that overflows. In your code you just defined the clip but did not apply it anywhere.

Ccl
  • 53
  • 4
  • Thank you! I forgot to check my css and as it seems I forgot to add this line: clip-path: url(#clip); for my .line. That's what it was missing. – user9026955 Apr 09 '18 at 18:35