D3.js d3使用面积的最大值更新路径

我显示一个

d3.area（）

。为了显示最大值，我在数据集的最大值处绘制了一条水平线，其中

d3.line（）

。该值使用以下公式计算：

var

max_out=d3.max（数据，函数（d）{return+d.out；}）

要浏览图形，我使用如下设置：

一旦该区域被刷过，我还想上下移动“最大线”以反映新域，而不是使用整个数据集

有指针吗？
类似这样的：

  focus.append("line")
    .attr("class", "peak")
    .style("stroke", "orange")
    .attr("stroke-width", 3);

  function setPeak(){
    var maxY = {
      x: null,
      y: -1e100
    };
    data.forEach(function(d){
      if (d.date >= x.domain()[0] &&
          d.date <= x.domain()[1] &&
          d.price > maxY.y){

            maxY.y = d.price;
            maxY.x = d.date;

          }
    });
    d3.select(".peak")
      .attr("x1", x(maxY.x))
      .attr("x2", x(maxY.x))
      .attr("y1", 0)
      .attr("y2", height);
  }

  setPeak();

focus.append（“行”）
.attr（“类”、“峰值”）
.style（“笔划”、“橙色”）
.attr（“笔划宽度”，3）；
函数setPeak（）{
变量maxY={
x:null，
y:-1e100
};
data.forEach（函数（d）{
如果（d.date>=x.domain（）[0]&&
d、 日期（maxY.y）{
maxY.y=d.price；
maxY.x=d.date；
}
});
d3.选择（“峰值”）
.attr（“x1”，x（maxY.x））
.attr（“x2”，x（maxY.x））
.attr（“y1”，0）
.attr（“y2”，高度）；
}
设定峰值（）；

运行代码：



.区域{
填充：钢蓝；
剪辑路径：url（#剪辑）；
}
.zoom{
光标：移动；
填充：无；
指针事件：全部；
}
var svg=d3。选择（“svg”），
保证金={
前20名，
右:20,，
底部：110，
左：40
},
边缘2={
排名：230，
右:20,，
底数：30，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
height2=+svg.attr（“height”）-margin2.top-margin2.bottom；
var x=d3.scaleTime（）.range（[0，宽度]），
x2=d3.scaleTime（）.range（[0，宽度]），
y=d3.scaleLinear（）.range（[height，0]），
y2=d3.scaleLinear（）.range（[height2，0]）；
var xAxis=d3.axisBottom（x），
xAxis2=d3.轴底（x2），
yAxis=d3。轴左（y）；
var brush=d3.brushX（）
.范围([
[0, 0],
[宽度、高度2]
])
.在（“刷端”，刷过的）；
var zoom=d3.zoom（）
.scaleExtent（[1，无穷大]）
.翻译范围([
[0, 0],
[宽度、高度]
])
.范围([
[0, 0],
[宽度、高度]
])
。打开（“缩放”，缩放）；
var area=d3.area（）
.curve（d3.curveMonotoneX）
.x（功能（d）{
返回x（d.日期）；
})
.y0（高度）
.y1（功能（d）{
返回y（d.价格）；
});
var area 2=d3.面积（）
.curve（d3.curveMonotoneX）
.x（功能（d）{
返回x2（d.日期）；
})
.y0（高度2）
.y1（功能（d）{
返回y2（d.价格）；
});
svg.append（“defs”）.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var focus=svg.append（“g”）
.attr（“类”、“焦点”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var context=svg.append（“g”）
.attr（“类”、“上下文”）
.attr（“transform”、“translate”（+margin2.left+）、“+margin2.top+”）；
//d3.csv（“data.csv”），类型，功能（错误，数据）{
//如果（错误）抛出错误；
风险值数据=[{
“日期”：“1999-12-31T23:00:00.000Z”，
“价格”：1394.46
}, {
“日期”：“2000-01-31T23:00:00.000Z”，
“价格”：1366.42
}, {
“日期”：“2000-02-29T23:00:00.000Z”，
“价格”：1498.58
}, {
“日期”：“2000-03-31T22:00:00.000Z”，
“价格”：1452.43
}, {
“日期”：“2000-04-30T22:00:00.000Z”，
“价格”：1420.6
}, {
“日期”：“2000-05-31T22:00:00.000Z”，
“价格”：1454.6
}, {
“日期”：“2000-06-30T22:00:00.000Z”，
“价格”：1430.83
}, {
“日期”：“2000-07-31T22:00:00.000Z”，
“价格”：1517.68
}, {
“日期”：“2000-08-31T22:00:00.000Z”，
“价格”：1436.51
}, {
“日期”：“2000-09-30T22:00:00.000Z”，
“价格”：1429.4
}, {
“日期”：“2000-10-31T23:00:00.000Z”，
“价格”：1314.95
}, {
“日期”：“2000-11-30T23:00:00.000Z”，
“价格”：1320.28
}, {
“日期”：“2000-12-31T23:00:00.000Z”，
“价格”：1366.01
}, {
“日期”：“2001-01-31T23:00:00.000Z”，
“价格”：1239.94
}, {
“日期”：“2001-02-28323:00:00.000Z”，
“价格”：1160.33
}, {
“日期”：“2001-03-31T22:00:00.000Z”，
“价格”：1249.46
}, {
“日期”：“2001-04-30T22:00:00.000Z”，
“价格”：1255.82
}, {
“日期”：“2001-05-31T22:00:00.000Z”，
“价格”：1224.38
}, {
“日期”：“2001-06-30T22:00:00.000Z”，
“价格”：1211.23
}, {
“日期”：“2001-07-31T22:00:00.000Z”，
“价格”：1133.58
}, {
“日期”：“2001-08-31T22:00:00.000Z”，
“价格”：1040.94
}, {
“日期”：“2001-09-30T22:00:00.000Z”，
“价格”：1059.78
}, {
“日期”：“2001-10-31T23:00:00.000Z”，
“价格”：1139.45
}, {
“日期”：“2001-11-30T23:00:00.000Z”，
“价格”：1148.08
}, {
“日期”：“2001-12-31T23:00:00.000Z”，
“价格”：1130.2
}, {
“日期”：“2002-01-31T23:00:00.000Z”，
“价格”：1106.73
}, {
“日期”：“2002-02-28323:00:00.000Z”，
“价格”：1147.39
}, {
“日期”：“2002-03-31T22:00:00.000Z”，
“价格”：1076.92
}, {
“日期”：“2002-04-30T22:00:00.000Z”，
“价格”：1067.14
}, {
“日期”：“2002-05-31T22:00:00.000Z”，
“价格”：989.82
}, {
“日期”：“2002-06-30T22:00:00.000Z”，
“价格”：911.62
}, {
“日期”：“2002-07-31T22:00:00.000Z”，
“价格”：916.07
}, {
“日期”：“2002-08-31T22:00:00.000Z”，
“价格”：815.28
}, {
“日期”：“2002-09-30T22:00:00.000Z”，
“价格”：885.76
}, {
“日期”：“2002-10-31T23:00:00.000Z”，
“价格”：936.31
}, {
“日期”：“2002-11-30T23:00:00.000Z”，
“价格”：879.82
}, {
“日期”：“2002-12-31T23:00:00.000Z”，
“价格”：855.7
}, {
“日期”：“2003-01-31T23:00:00.000Z”，
“价格”：841.15
}, {
“日期”：“2003-02-28323:00:00.000Z”，
“价格”：848.18
}, {
“日期”：“2003-03-31T22:00:00.000Z”，
“价格”：916.92
}, {
“日期”：“2003-04-30T22:00:00.000Z”，
“价格”：963.59
}, {
“日期”：“2003-05-31T22:00:00.000Z”，
“价格”：974.5
}, {
“日期”：“2003-06-30T22:00:00.000Z”，
“价格”：990.31
}, {
“日期”：“2003-07-31T22:00:00.000Z”，
“价格”：1008.01
}, {
“日期”：“2003-08-31T22:00:00.000Z”，
“价格”：995.97
}, {
“日期”：
var line = d3.line()
    .x(function(d) { return x(d.date); });

  focus.append("path")
    .attr("class", "line");

.attr("d", line.y(function () {
    return y(max);
}));

.datum(data)

  // There's your main view's data area
  focus.append("path")
      .datum(data)
      .attr("class", "area")
      .attr("d", area);

  // There's your 'peak' horizontal line
  var max = d3.max(data, function(d){ return d.price; });
  focus.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line.y(function () {
        return y(max);
    }));

  var lo = x.domain()[0],
      hi = x.domain()[1];

  var max = d3.max(data.filter(function (d) {
    return d.date.getTime() >= lo && d.date.getTime() <= hi;
  }), function(d){ return d.price; });

  focus.select(".line").attr("d", line.y(function () {
    return y(max);
  }));