Javascript d3 v4如何将转换应用于在转换后存活的子元素

如果您在整页中查看该示例（忽略疯狂的一行，这是不相关的），您将看到，在加载时，通过改变transition属性，X轴的最后一个勾号被“伪造”了10

但是，当您单击“更新”按钮运行XAxis数据的更新和转换时，数据将被替换，最后一个勾号的“伪造”位置将丢失，尽管在更新时触发的

customXAxis

函数中重新应用了“伪造”

我怀疑这与过渡生命周期有关

在父元素转换之前，是否可以对某些元素的子元素（例如

.remove（）

）进行所需的位置更改

var update=document.getElementById（“更新”）；
update.addEventListener(
“点击”，
函数（）{
updateFunc（）；
},
假的
);
风险值数据=[
{
日期：1，
金额：58.13
},
{
日期：2007年12月30日，
金额：53.98
},
{
日期：2007年12月27日，
金额：67.0
},
{
日期：2006年12月26日，
金额：89.7
},
{
日期:25日，
金额：99.0
},
{
日期：24，
金额：130.28
},
{
日期：23，
金额：166.7
},
{
日期:20,，
金额：234.98
},
{
日期：19，
金额：345.44
},
{
日期：18，
金额：443.34
},
{
日期：17，
金额：543.7
},
{
日期：16，
金额：580.13
},
{
日期：2008年12月13日，
金额：605.23
},
{
日期：12，
金额：622.77
},
{
日期：2007年11月11日，
金额：626.2
},
{
日期:10,，
金额：628.44
},
{
日期：2007年9月9日，
金额：636.23
},
{
日期:5,，
金额：633.68
},
{
日期：2007年4月4日，
金额：624.31
},
{
日期：2007年3月3日，
金额：629.32
},
{
日期:二〇〇四年四月二日，
金额：618.63
},
{
日期：2007年12月30日，
金额：599.55
},
{
日期：29，
金额：609.86
},
{
日期：2008年12月28日，
金额：617.62
},
{
日期：2007年12月27日，
金额：614.48
},
{
日期：2006年12月26日，
金额：606.98
}
];
//设置图形的尺寸和边距
var margin={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
//设定范围
var x=d3.scaleLinear（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，0]）；
//界定界线
var valueline=d3
.第（）行
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d.金额）；
});
//将svg对象附加到页面主体
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
var svg=d3
.选择（“正文”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//获取数据
//格式化数据
data.forEach（函数（d）{
d、 日期=+d.日期；
d、 金额=+d.金额；
});
//缩放数据的范围
x、 领域(
d3.范围（数据、功能（d）{
返回日期；
})
);
y、 领域([
0,
d3.最大值（数据、函数（d）{
返回d.金额；
})
]);
//添加valueline路径。
svg.append（“path”）.data（[data]）.attr（“class”，“line”）.attr（“d”，valueline）；
//添加X轴
svg
.附加（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.classed（“XAxis”，真）
.呼叫（customXAxis）；
函数customXAxis（g）{
g、 调用（d3.axisBottom（x））；
var firstTicksTransform=svg
.selectAll（.XAxis.tick:类型的第一个）
.attr（“转换”）；
var translate=firstTicksTransform
.子串(
firstticksform.indexOf（“（”）+1，
firstticksform.indexOf（“）”）
)
.拆分（“，”）；
svg
.selectAll（“XAxis.tick:类型的第一个”）
.attr（“transform”、“translate”（+（parseFloat（translate[0]）+10）+”，0）”；
var lasttickstrasform=svg.selectAll（“.XAxis.tick:type的最后一个”）.attr（“transform”）；
var translateLast=lastTicksTransform
.子串(
lastTicksTransform.indexOf（“（”）+1，
lastTicksTransform.indexOf（“）”）
)
.拆分（“，”）；
svg
.selectAll（.XAxis.tick:类型的最后一个）
艾特先生(
“转化”，
translate（“+（parseFloat（translateLast[0]）-10）+”，0）
);
}
//添加Y轴
svg.append（“g”）.classed（“YAxis”，true）.call（d3.axisLeft（y））；
var updateFunc=函数（）{
var svg=d3.select（“body svg”）.transition（）；
data.forEach（函数（d）{
d、 日期=d.日期+5；
d、 金额=+d.金额；
});
x、 领域(
d3.范围（数据、功能（d）{
返回日期；
})
);
svg.select（“.XAxis”）.duration（750）.call（customXAxis）；
}；

.line{
填充：无；
笔画：钢蓝；
笔画宽度：2px；
}

更新