d3.v4.js 折线图缩放 - 线条脱离图表 + 我希望 xAxis 分别改变

Question

我有一个多线图。缩放工作正常，只是当我放大时，线条会超出图表，我想修复它。另外，我不知道为什么我的 xAxis 上的日期保持静态并且在我放大时不会分别改变。
我的画笔和缩放功能代码：

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));
        }

我的图表的图像： You can see the lines that get out of the graph. [编辑]
这是一个plunker 与我的整个代码。
提前谢谢你。

Answer 1

试试这个（在 plunker 上添加代码的第 195 行）：

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

您需要将剪辑应用于溢出的行（或其他任何内容）。在您的代码中，您刚刚定义了剪辑，但没有在任何地方应用它。