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)')

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

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

d3.v4.js Line graph zoom - lines get out of the graph + I want xAxis to change respectively

javascript

linegraph

d3.js