Javascript 缩放仅对一个元素有效

我使用另一个函数着色的

d3.nest（）

创建了一个包含多个面积图的图形。当我尝试添加缩放功能时，我只是让它与第一个面积图一起工作

这里有一个

svg{
字体：10px无衬线；
}
.区域{
填充：钢蓝；
剪辑路径：url（#剪辑）；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.刷{
冲程：#fff；
填充不透明度：.125；
形状渲染：边缘清晰；
}
var margin={顶部：10，右侧：10，底部：100，左侧：40}，
margin2={顶部：430，右侧：10，底部：20，左侧：40}，
宽度=960-margin.left-margin.right，
高度=500-页边距.顶部-页边距.底部，
高度2=500-边缘2.顶部-边缘2.底部；
var x=d3.scale.linear（）.range（[0，宽度]），
x2=d3.刻度.线性（）.范围（[0，宽度]），
y=d3.刻度.线性（）.范围（[高度，0]），
y2=d3.刻度.线性（）.范围（[height2，0]）；
var xAxis=d3.svg.axis（）.scale（x）.orient（“底部”），
xAxis2=d3.svg.axis（）.scale（x2.orient（“底部”），
yAxis=d3.svg.axis（）.scale（y）.orient（“左”）；
var brush=d3.svg.brush（）
.x（x2）
.在（“刷子”，刷子）；
var area=d3.svg.area（）
.插入（“基础”）
.x（函数（d）{返回x（d.distance）；}）
.y0（高度）
.y1（函数（d）{returny（d.elevation）；}）；
var area2=d3.svg.area（）
.插入（“基础”）
.x（函数（d）{返回x2（d.距离）；}）
.y0（高度2）
.y1（函数（d）{返回y2（d.elevation）；}）；
//将颜色映射到限制
var color=d3.scale.ordinal（）
.domain（[-10，-5,0,5,10]）
.范围（['a1d99b'、'c7e9c0'、'fdd0a2'、'fdae6b'、'fd8d3c'、'e6550d'）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）；
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+”）；
//计算数据组的平均梯度。
函数dataGroupGradient（数据组）{
返回d3.平均值（数据组、函数（值）{
返回parseFloat（value.gradient）；
});
}
var line_points=[]；
d3.csv（“first5km_Strade_Bianche.csv”），函数（错误，数据）{
data.forEach（函数（d）{
d、 距离=+d.距离；
d、 标高=+d.标高；
d、 纬度=+d.纬度；
d、 经度=+d.经度；
直线点推力（[d.纬度，d.经度]）；
});
//根据“组”拆分数据
var dataGroup=d3.nest（）
.键（功能（d）{
返回d组；
})
.条目（数据）；
//要删除数据组之间的空白，请附加一个数据组的第一个元素
//数据组到上一个数据组的最后一个元素。
forEach（函数（组，i）{
if（i

只是刷子处理程序中的一个小错误：

function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.select(".area").attr("d", area);// <-- HERE!
  focus.select(".x.axis").call(xAxis);
}

---

把一个JSFIDLE放在一起，我们可以通过这种方式更容易地看到问题：）我把一个JSFIDLE放在一起Plunk@Will这也解决了你昨天发布的关于缩放功能的问题吗？没有。那是一个不同的故事。它根本没有变焦。我需要添加一个演示的问题，这样我可以得到一些帮助。谢谢你的邀请，真奇怪。对我来说，你的行为和你在问题中所链接的一样，包括沿x轴缩放。完美。非常感谢。我知道这是件小事。

function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.select(".area").attr("d", area);// <-- HERE!
  focus.select(".x.axis").call(xAxis);
}

focus.selectAll(".area").attr("d", area);