Svg 如何在d3.js中的图表节点上添加形状？

我有一个d3js面积图。在每个数据点/节点上，我想添加一个自定义svg形状

我如何以一种简单的方式做到这一点，并且仍然遵循d3.js编码的习惯用法

这张图片显示了红色圆圈，这是我想添加到图表中的形状

我希望这会有所帮助

//设置画布/图形的尺寸
var保证金={
前30名，
右:20,，
底数：30，
左：50
},
宽度=600-边距。左侧-边距。右侧，
高度=270-margin.top-margin.bottom；
//解析日期/时间
var parseDate=d3.time.format（“%d-%b-%y”）.parse；
//设定范围
var x=d3.time.scale（）.range（[0，width]）；
变量y=d3.scale.linear（）.range（[height，0]）；
//定义轴
var xAxis=d3.svg.axis（）.scale（x）
.方向（“底部”）。刻度（5）；
var yAxis=d3.svg.axis（）.scale（y）
.方向（“左”）。勾号（5）；
//界定界线
var valueline=d3.svg.line（）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d.close）；
});
//添加svg画布
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//获取数据
风险值数据=[{
“日期”：“2012年5月1日”，
“结束”：“58.13”
}, {
“日期”：“2012年4月30日”，
“结束”：“53.98”
}, {
“日期”：“2012年4月27日”，
“关闭”：“67.00”
}, {
“日期”：“2012年4月26日”，
“结束”：“89.70”
}, {
“日期”：“2012年4月25日”，
“关闭”：“99.00”
}, {
“日期”：“2012年4月24日”，
“结束”：“130.28”
}];
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
d、 close=+d.close；
});
//缩放数据的范围
x、 域（d3）。范围（数据，函数（d）{
返回日期；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.close；
})]);
//添加valueline路径。
追加（“路径”）
.attr（“类”、“行”）
.attr（“d”，valueline（数据））；
svg.selectAll（'circle'））
.数据（数据）
.enter（）.append（'圆'）
.attr（'cx'，函数（d）{
返回x（d.日期）；
})
.attr（'cy'，函数（d）{
返回y（d.close）；
})
.attr（'r'，6）；
//添加X轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//添加Y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
正文{
字体：12px Arial；
}
路径{
笔画：钢蓝；
笔画宽度：2；
填充：无；
}
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：1；
形状渲染：边缘清晰；
}
在线路上放置标记。