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）：

..._DATE_PTF)..VisibleItemsList = Array(CDate("08.04.2018"), CDate("09.05.2018"))

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

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

1 个答案: