D3.js线超出刷子后的x轴

我的图形中的笔刷/缩放行为有问题

当我放大一个区域时，图形会超出x轴的边界，除非缩放窗口覆盖图形的整个宽度

我一直没能弄清楚我错过了什么

绘图功能中的画笔代码为：

  brush = d3.svg.brush()
      .x(mini_x)
     .on("brush", brush);

mini
    .call(brush)
    .selectAll("rect")
    .attr("y", -6)
    .attr("height", mini_height + 7);

// brush:
function brush() {

  x.domain(brush.empty() ? mini_x.domain() : brush.extent());
  mainE.select(".tline") .attr("d", function(d) {return line(dataset); });
  main.select(".x.axis").call(xAxis);
}

下面是代码和代码片段

谢谢你的帮助

编辑：我简化了图形代码，不使用更新模式。所有内容都已初始化，然后显示在draw函数中

编辑2：我试着尽可能地紧跟其后，并得出了这样的结论：这一次，这条线只超出了左侧。我还没弄清楚到底发生了什么事

var d3graph=（函数（）{
var w=800；
var h=250；
//边际
var margin={顶部：20，右侧：80，底部：100，左侧：40}，
mini_margin={top:（h-margin.bottom），右：80，下：20，左：40}，
宽度=w-边距。左侧-边距。右侧，
高度=h-页边距.顶部-页边距.底部，
mini_height=h—mini_margin.top—mini_margin.bottom；
//大小svg
var svg=d3。选择（“disp”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）；
//主图组
var main=svg.append（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//笔刷视图组
var mini=svg.append（“g”）.attr（'class'，'brush'）
.attr（“转换”、“转换”（+mini_margin.left+）、“+mini_margin.top+”）；
//x刻度
var x=d3.time.scale（）.range（[0，width]）；
var mini_x=d3.time.scale（）.range（[0，width]）；
//y刻度
变量y=d3.scale.linear（）
.domain（[01100]）
.范围（[高度，0]）；
var mini_y=d3.scale.linear（）
.domain（[01100]）
.范围（[最小高度，0]）；
//线条对象
var line=d3.svg.line（）
.插入（“基数”）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d.value.mag）；
});  
//x轴
var xAxis=d3.svg.axis（）
.scale（x）//xbar
.orient（“底部”）
.滴答声（d3.time.hours，6）
.tickFormat（d3.time.format（“%m/%d%I:%m%p”）；
var mini_xAxis=d3.svg.axis（）
.scale（x）//xbar
.orient（“底部”）
.滴答声（d3.time.hours，6）
.tickFormat（d3.time.format（“%m/%d%I:%m%p”）；
//y轴
var yAxis=d3.svg.axis（）
.比例（y）
.orient（'左'）
.ticks（4）//生成变量
.1（8）；
//轴心群
主体。附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（+“+0+”、“+height+”））
.呼叫（xAxis）
.selectAll（“文本”）
.样式（“文本锚定”、“结束”）；
迷你附加（“g”）
.attr（“类”、“x轴”）
.attr（“转换”、“转换（+“+0+”、“+mini_height+”））
.呼叫（xAxis）
.selectAll（“文本”）
.样式（“文本锚定”、“结束”）；
main.append（'g'）
.attr（'class'，'y轴'）.attr（'transform'，'translate（-“+0+”，“+0+”））
.呼叫（yAxis）；
//刷组
mini.append（“g”）.attr（“class”，“x brush”）；
var parseDate=d3.time.format（“%Y-%m-%d%H:%m:%S”）.parse；
var刷；
////////////////////////////////////////////////////////////////////////
/////////绘图函数
///////////////////////////////////////////////////////////////////////
函数绘制（数据集）{
//解析日期
dataset.forEach（函数（d）{
if（typeof（d.date）==“string”）{d.date=parseDate（d.date）；}
});
//排序日期
dataset=dataset.sort（sortByDateAscending）；
//x更新域
x、 域（d3.extent（数据集，函数（d）{returnd.date；}））；
//更新刷x域
mini_x.domain（d3.extent（数据集，函数（d）{returnd.date；}））；
//附加主图形线
main.append（“路径”）
.attr（“类”、“线”）
.style（'填充'，'无'）
.style（'笔划'，'红色'）
//.style（'opacity'，'0.3'）
.attr（“d”，函数（d）{
返回线（数据集）；
});
//附加画笔图线
mini.append（“路径”）
.attr（“类”、“线”）
.style（'填充'，'无'）
.style（'笔划'，'红色'）
//.style（'opacity'，'0.3'）
.attr（“d”，函数（d）{
返回线（数据集）；
});
//调用x轴
main.selectAll（“g.x.axis”）
.attr（'id'，'xaxs'）
.呼叫（xAxis）
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”，“+”+0+“px”）
.attr（“dy”，“+10px”）；
//创建笔刷
brush=d3.svg.brush（）
.x（mini_x）
.“刷子”，刷子；
//画笔
迷你
.呼叫（刷子）
.selectAll（“rect”）
.attr（“y”，-6）
.attr（“高度”，最小高度+7）；
//画笔功能
函数刷（）{
x、 域（brush.empty（）？mini_x.domain（）：brush.extent（））；
main.select（“.tline”）.attr（“d”，函数（d）{返回行（数据集）；}）；
main.select（“.x.axis”）.call（xAxis）；
}
}
函数sortByDateAscending（a，b）{
返回日期.parse（a.Date）-Date.parse（b.Date）；
};
返回{
抽签：抽签
}
})();
///////////////////////////////////////////////////
//数据生成代码：
var tdata=[
{
“属性”：“温度”，
“日期”：“2016-06-28 05:47:10”，
“值”：{“mag”：70，“字符串”：“70f”}，
“链接”：http://www.google.com"
}
];
//构建阵列
对于（var i=0；i这是一个老问题，我相信你找到了解决方案，但为了有一天对某人有用，解决方案是：

mini
  .call(brush)
  .selectAll("rect")
  .attr("y", 0)
  .attr("height", mini_height);

因为您向y添加了一些值，并使其溢出。
这是一个老问题，我相信您找到了解决方案，但只是为了有一天对某人有用，解决方案是：

mini
  .call(brush)
  .selectAll("rect")
  .attr("y", 0)
  .attr("height", mini_height);

因为您向y和高度添加了一些值，所以它会溢出