Javascript d3页面加载时剪辑路径仅工作一次

我目前正试图在d3中为我的烛台图表实现一个clipPath。如果我在剪贴簿上改变矩形的宽度和高度，我可以看到烛台消失，但当我把它们画过剪贴簿的边界时，它们仍然保留着

var宽度=600；
var高度=500；
var marginTop=20；
var marginBottom=20；
var marginLeft=60//图表左侧所需的初始空间
var marginRight=20；
var坎德宽度=20；
var candleGap=40；
var candleMargin=10；
var=70；
var=60；
var wickThickness=“2”；
var hLineColor=“#b5b6b7”；
风险值数据=[{
日期：2015年12月1日，
高位：118.81，
低:116.86,，
开放时间：118.75，
收盘：117.34
}, {
日期：2015年12月2日，
高位：118.11，
低位：116.08，
开放时间：117.05，
收盘：116.28
}, {
日期：2015年3月12日，
高:116.79,，
低位：114.22，
开放时间：116.55，
收盘价：115.2
}, {
日期：2015年4月12日，
高位：119.25，
低：115.11，
开放时间：115:29，
收盘时间：119.03
}, {
日期：2015年7月12日，
高:119.86,，
低：117.81，
开放时间：118.98，
收盘：118.28
}, {
日期：2016年1月5日，
高：105.85，
低:102.41,，
开放时间：105.75，
收盘：102.71
}, {
日期：2016年2月4日，
高：97.33，
低:95.19,，
开放时间：95.86，
收盘价：96.6
}, {
日期：2015年12月1日，
高位：118.81，
低:116.86,，
开放时间：118.75，
收盘：117.34
}, {
日期：2015年12月2日，
高位：118.11，
低位：116.08，
开放时间：117.05，
收盘：116.28
}, {
日期：2015年3月12日，
高:116.79,，
低位：114.22，
开放时间：116.55，
收盘价：115.2
}, {
日期：2015年4月12日，
高位：119.25，
低：115.11，
开放时间：115:29，
收盘时间：119.03
}, {
日期：2015年7月12日，
高:119.86,，
低：117.81，
开放时间：118.98，
收盘：118.28
}, {
日期：2016年1月5日，
高：105.85，
低:102.41,，
开放时间：105.75，
收盘：102.71
}, {
日期：2016年2月4日，
高：97.33，
低:95.19,，
开放时间：95.86，
收盘价：96.6
}];
var maxi=d3.max（数据，函数（d）{
返回d值；
}); // 要检查数据数组中的最大值是多少。。。仅供参考
console.log（maxi）//不显示在括号中？？
//.map（）基于函数创建新数组
var maxLow=d3.min（data.map）（函数（x）{
返回x[“低”]；
}))//返回“低”的最低值
var maxHigh=d3.max（data.map）函数（x）{
返回x[“高”]；
}))//返回“高”的最高值
var maxMinDiff=（maxHigh-maxLow）*0.1；
console.log（maxMinDiff）；
//函数，该函数将返回两个数字a或b中的最小值
最小功能（a，b）{
返回ab？a:b；
};
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.尺寸（-高度）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.滴答声（5）
.尺寸（-宽度）；
var x=d3.scale.linear（）.domain（[-width/2，width/2]）。range（[0，width]）；
//变量Y是一个函数，它将Y轴上的数字从输入域缩放到输出范围；高度-0，反转或翻转Y，否则可视化是颠倒的
变量y=d3.scale.linear（）
.domain（[maxLow-maxMinDiff，maxHigh+maxMinDiff]）//更改以反映用于定义输入域的最低、最高和差异的新变量
.范围（[高度-边缘顶部-边缘底部，0+边缘左侧+边缘右侧]）//范围尚未修改。。。记住，x，y已经反转以反映y，x
//本节与#2的mashup代码非常相似
var zoom=d3.behavior.zoom（）
.x（x）
.y（y）
.scaleExtent（[1,32]）
。打开（“缩放”，缩放）；
var图表=d3.选择（“主体”）
.append（“svg:svg”）//名称空间前缀
.attr（“类别”、“图表”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var grid=chart.append（“g”）
.attr（“类”、“网格化”）；
//创建用于查看的水平线的脚本
var lines=grid.selectAll（“line.y”）
.数据（y.ticks（20））
.输入（）
.append（“svg:line”）
.attr（“类别”、“y”）
.attr（“x1”，边缘左侧）
.attr（“x2”，宽度-边缘右侧）
.attr（“y1”，y）
.attr（“y2”，y）
.attr（“笔划”，hLineColor）；
变量编号=grid.selectAll（“text.yrule”）
.数据（y.ticks（10））
.输入（）
.append（“svg:text”）
.attr（“类别”、“规则”）
.attr（“x”，边缘左侧/2）
.attr（“y”，y）
.attr（“dy”，0）
.attr（“dx”，20）
.样式（“填充”，“#b5b6b7”）
.attr（“文本锚定”、“中间”）
图表。附加（“图表：clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“剪辑路径”，函数（d，i）{
返回“url（#clip）”；
})
.attr（“宽度”，宽度-填充）
.attr（“高度”，高度）
.attr（“x”，Xpadding-15）
var candlestick=chart.append（“g”）
.attr（“类”、“烛台”）
.attr（“剪辑路径”、“url（#剪辑）”）
//函数使用var数据中的数据构建图表
//.调用缩放和附加g启用平移和缩放。。。还是不完美。。。不希望y轴移动等
功能构建图（数据）{
//用于创建位于矩形后面的烛台灯芯的脚本//x1 y1表示高，x2 y2表示低
//首先编码，使其位于矩形下方
var wicks=烛台。选择全部（“wick”）
.数据（数据）
.输入（）
.附加（“行”）
.attr（“x1”，函数（d，i）{
返回candleMargin+marginLeft+candleWidth/2+（candleGap*i）；
})
.attr（“x2”，函数（d，i）{
返回candleMargin+marginLeft+candleWidth/2+（candleGap*i）；
})
.attr（“y1”，函数（d）{
返回y（最大值（d高，d低））；
})//使用变量y进行缩放，返回最大值H或L
.attr（“y2”，功能（d）{
返回y（最小值（d高，d低））；
})//使用变量y进行缩放，返回最小值H或L
.attr（“笔划”，功能（d）{
返回d.打开>d.关闭？”#a01f1b:“#1ba048”；
})
.attr（“笔划宽度”，笔划厚度）；
//用于创建表示打开和关闭位置的矩形的脚本
//图表。选择全部（“rect”）
var烛台=烛台。选择全部（“rect”）
.数据（da）
var candlestick = chart.append("g")
  .attr("clip-path", "url(#clip)")
  .append("g")
  .attr("class", "candlesticks");