Javascript D3.v3刷奇怪的行为

我正试着在我的柱状图上画笔。笔刷控件仅在单击事件后出现（而不是在初始页面加载时）。显然，这不是我们想要的行为

在第一次单击事件之前，如何在初始页面加载上实例化图表和画笔

//测试数据//
var caldata=[
{“cal_start_yr”：“1945”}，{“cal_start_yr”：“1948”}，
{“cal_start_yr”：“1945”}，{“cal_start_yr”：“1950”}，
{“cal_start_yr”：“1945”}，{“cal_start_yr”：“1941”}，
{“cal_start_yr”：“1944”}，{“cal_start_yr”：“1949”}
];
//交叉过滤聚合//
var cals=交叉过滤器（caldata）；
var total=cals.groupAll（）.reduceCount（）.value（）；
var年份=cals.维度（功能（d）{
返回d.cal\u start\u yer；
});
var countYear=year.group（）.reduceCount（）；
var yearCount=countYear.all（）；
//一些辅助聚合值
var keys=countYear.all（）.map（函数（d）{返回d.value；}），
min=d3.min（countYear.all（），函数（d）{return d.key；}），
max=d3.max（countYear.all（），函数（d）{return d.key；}），
范围=最大值-最小值；
//直方图维数
var margin={顶部：10，右侧：20，底部：10，左侧：10}，
高度=250-margin.top-margin.bottom，
宽度=450-边距。左侧-边距。右侧，
barPadding=5；
//直方图比例
var xScale=d3.scale.linear（）
.domain（[min，max]）
.范围（[0，宽度]）；
var yScale=d3.scale.linear（）
.domain（[0，d3.max（countYear.all（），函数（d）{返回d.value；}）]）
.范围（[高度/2,0]）；
//D3刀尖
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.html（函数（d）{return d.key}）；
//画布设置//
var historogram1=d3。选择（#historogram1”）。追加（“svg:svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）；
//启动工具提示//
组织切片1.调用（tip）；
//绘制直方图//
Historogram1.selectAll（“rect”）
.数据（年度计数）
.enter（）.append（“rect”）
.attr（“x”，函数（d）{
返回X刻度（d键）+0.5*（宽度/范围）
})
.attr（“宽度”，宽度/范围）
.attr（“y”，函数（d）{
返回Y刻度（d值）；
})
.attr（“高度”，功能（d）{
返回值（高度/2-Y刻度（d值））；
})
.attr（“填充”、“绿色”）
.attr（“填充不透明度”，.25）
.attr（“笔划”、“白色”）
.on（“鼠标悬停”，提示显示）
.on（“鼠标出”，提示隐藏）；
//X轴//
var xAxis=d3.svg.axis（）
.scale（xScale）
.滴答声（5）
.orient（“底部”）
.d.格式（d3.格式（“d”））；
Historogram1.附加（“g”）
.attr（“类”、“轴”）
.呼叫（xAxis）
.attr（“变换”、“平移”（+margin.left+）、“+height/2+”）；
var brush=d3.svg.brush（）
.x（xScale）
.范围（[xScale（+1945），xScale（+1946）]）
.on（“刷子”，函数（d）{console.log（d）；}）；
var brushg=Historogram1.append（“g”）
.attr（“类”、“刷”）
.呼叫（刷子）
brush.selectAll（“rect”）
.attr（“高度”，高度/2）；
brush.selectAll（“.resize”）
.append（“路径”）
.attr（“d”，resizePath）；
函数大小调整路径（d）{
//设置笔刷大小控制柄的样式。不知道这些VAL是做什么的。。。
变量e=+（d==“e”），
x=e？1:-1，
y=高度/4；//手柄的相对位置
返回“M+（.5*x）+”、“y+”A6,60+e+”+（6.5*x）+）、“+（y+6）+”V+（2*y-6）+“A6,60+e+”+（.5*x）+）、“+（2*y）+”Z+“M+（2.5*x）+”、“y+8+”V+（2*y-8）+“M+（4.5*x）+”、“y+8”）；
}

/***d3提示样式*/
.作为控制台包装{最大高度：20%！重要；}
.d3提示{
线高：1.5；
填充：8px；
背景：rgba（0,0,0,0.8）；
颜色：#fff；
边界半径：0px；
文本对齐：居中；
}
.d3提示：之后{
框大小：边框框；
显示：内联；
字体大小：10px；
宽度：100%；
线高：1；
颜色：rgba（0,0,0,0.8）；
内容：“\25BC”；
位置：绝对位置；
文本对齐：居中；
}
第三点提示n：之后{
最高：100%；
左：0；
保证金：-1px0；
}
/***D3电刷*/
.刷{
冲程：#222；
填充不透明度：.125；
形状渲染：边缘清晰；
}

---

笔刷的范围设置为刻度域中的值，而不是其范围！从：

尺度通常定义为定量尺度，在这种情况下，范围位于尺度域的数据空间中

要设置初始范围，必须使用

.extent([1945, 1946])

而不是

.extent([xScale(+1945), xScale(+1946)])

要获得有效的演示，请查看更新的代码段：

//测试数据//
var caldata=[
{“cal_start_yr”：“1945”}，{“cal_start_yr”：“1948”}，
{“cal_start_yr”：“1945”}，{“cal_start_yr”：“1950”}，
{“cal_start_yr”：“1945”}，{“cal_start_yr”：“1941”}，
{“cal_start_yr”：“1944”}，{“cal_start_yr”：“1949”}
];
//交叉过滤聚合//
var cals=交叉过滤器（caldata）；
var total=cals.groupAll（）.reduceCount（）.value（）；
var年份=cals.维度（功能（d）{
返回d.cal\u start\u yer；
});
var countYear=year.group（）.reduceCount（）；
var yearCount=countYear.all（）；
//一些辅助聚合值
var keys=countYear.all（）.map（函数（d）{返回d.value；}），
min=d3.min（countYear.all（），函数（d）{return d.key；}），
max=d3.max（countYear.all（），函数（d）{return d.key；}），
范围=最大值-最小值；
//直方图维数
var margin={顶部：10，右侧：20，底部：10，左侧：10}，
高度=250-margin.top-margin.bottom，
宽度=450-边距。左侧-边距。右侧，
barPadding=5；
//直方图比例
var xScale=d3.scale.linear（）
.domain（[min，max]）
.范围（[0，宽度]）；
var yScale=d3.scale.linear（）
.domain（[0，d3.max（countYear.all（），函数（d）{返回d.value；}）]）
.范围（[高度/2,0]）；
//D3刀尖
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.html（函数（d）{return d.key}）；
//画布设置//
var historogram1=d3。选择（#historogram1”）。追加（“svg:svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）；
//启动工具提示//
组织切片1.调用（tip）；
//绘制直方图/