如何修复 d3.js 图表缩放

Question

我愿意this.

但是当我放大它时，线超出了区域。

线路定义：

var valueline_1 = d3.line()
  .x(function (d) { return x_1(parseDate(d.date)); })
  .y(function (d) { return y_1(d.count); });

var valueline2_1 = d3.line()
  .x(function (d) { return x2_1(parseDate(d.date)); })
  .y(function (d) { return y2_1(d.count); });

然后是这段代码：

focus_1.append("path")
  .data([data])
  .attr("class", "line")
  .attr("d", valueline_1(i));

context_1.append("path")
  .data([data])
  .attr("class", "line")
  .attr("d", valueline2_1);

你能帮忙解决一下吗？

谢谢。

编辑： 此缩放代码：

var zoom_0 = d3.zoom()
    .scaleExtent([1, Infinity])
    .translateExtent([[0, 0], [width_0, height_0]])
    .extent([[0, 0], [width_0, height_0]])
    .on("zoom", zoomed_0);

function zoomed_0() {
    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush"
    ) return; // ignore zoom-by-brush
    var t = d3.event.transform;
    x_0.domain(t.rescaleX(x2_0).domain());
    focus_0.select(".area").attr("d", area_0);
    focus_0.select(".line").attr("d", valueline_0);
    focus_0.select(".axis--x").call(xAxis_0);
    context_0.select(".brush").call(brush_0.move, x_0.range().map(t.invertX, t));
}

我的页面上有多个图表。从 1 到 5 - 为此我附加 _{number}

Answer 1

您似乎没有应用 clip-path 样式。如果您在您提到的块中关闭此样式，它将看起来像您的屏幕，（请参见下面的演示 gif）：

检查您是否将 defs 元素和 clipPath 元素附加为 defs 的子元素：

svg.append("defs").append("clipPath")
  .attr("id", "clip")
  .append("rect")
  .attr("width", width)
  .attr("height", height);

此外，请检查您是否拥有这种风格：

.line { // <== this class name should be on your line/area
  clip-path: url(#clip); // <== !!!
}

如何修复 d3.js 图表缩放

How to fix d3.js chart scaling

line

zooming

d3.js