使用D3防止线路径在svg中溢出图形

Question

我正在关注此示例：https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

但是当我用 import java.util.ArrayList; public class Main { public static void main(String[] args) { ArrayList <Integer> array = new ArrayList<Integer>(); array.add(0,1); array.add(1,2); array.add(2,4); array.add(3,4); array.add(4,2); array.add(5,3); array.add(6,4); array.add(7,1); array.add(8,7); int i = (Integer) array.lastIndexOf(4); //Java don't uderstand this for (i = array.lastIndexOf(4); i < array.size()+1; i++) { System.out.println(array.indexOf(i)); //try to print element 6,7 and 8 of Array } } } 替换area中的focus时，它再也无法正常工作了。缩放，平移和使用画笔使line路径溢出图形的左右边界，如下所示：

这是主图表的屏幕截图，即line。它不包括focus图表

示例代码中的context元素不会发生此问题。我想我没有在area和brushed()中进行适当的更新。我该怎么做才能防止溢出？

以下是我使用zoomed()所做的更改：

原始代码：

line

我的代码：

var area = d3.area()
  .curve(d3.curveMonotoneX)
  .x(function(d) { return x(d.date); })
  .y0(height)
  .y1(function(d) { return y(d.price); });

[...]

focus.append("path")
  .datum(data)
  .attr("class", "area")
  .attr("d", area);

[...]

function brushed() {
  [...]
  focus.select(".area").attr("d", area);
  [...]
}

function zoomed() {
  [...]
  focus.select(".area").attr("d", area);
  [...]
}

感谢。

Answer 1

您似乎缺少剪辑路径，即将数据隐藏在图表域之外。这就是你正在使用的例子。

CSS：

.area {
    fill: steelblue;
    clip-path: url(#clip);
}

JS：

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