Javascript D3.js：缩放时沿二维图形中的直线移动圆

我目前正试图在d3.js中绘制一个时间序列数据。我已经为每个数据点绘制了一条直线并绘制了圆（在将来，圆将用于注释特定的数据点）。我尝试使用d3.js中的“缩放”行为缩放所有组件。但我无法沿直线拖动和缩放圆

我怎样才能沿着直线移动圆圈。以下是代码的JSFIDLE：

代码：

---

您只需在

zoomed（）

处理程序函数中更新圆的位置：

circlePoint
  .attr("cx", function (d) { return x_scale(d[xaxis_param]); })
  .attr("cy", function (d) { return y_scale(d[yaxis_param]); });

由于D3的缩放行为将负责更新比例，因此它们可以轻松用于计算新位置

请查看此代码段以获取完整示例：

var数据=[{
“我的时间”：“2015-12-01T23:10:00.000Z”，
“价值”：64
}, {
“我的时间”：“2015-12-01T23:15:00.000Z”，
“价值”：67
}, {
“我的时间”：“2015-12-01T23:20:00.000Z”，
“价值”：70
}, {
“我的时间”：“2015-12-01T23:25:00.000Z”，
“价值”：64
}, {
“我的时间”：“2015-12-01T23:30:00.000Z”，
“价值”：72
}, {
“我的时间”：“2015-12-01T23:35:00.000Z”，
“价值”：75
}, {
“我的时间”：“2015-12-01T23:40:00.000Z”，
“价值”：71
}, {
“我的时间”：“2015-12-01T23:45:00.000Z”，
“价值”：80
}, {
“我的时间”：“2015-12-01T23:50:00.000Z”，
“价值”：83
}, {
“我的时间”：“2015-12-01T23:55:00.000Z”，
“价值”：86
}, {
“我的时间”：“2015-12-02T00:00:00.000Z”，
“价值”：80
}, {
“我的时间”：“2015-12-02T00:05:00.000Z”，
“价值”：85
}];
var parseDate=d3.time.format（“%Y-%m-%dT%H:%m:%S.%LZ”）.parse；
data.forEach（函数（d）{
d、 mytime=解析日期（d.mytime）；
});
//var margin={顶部：30，右侧：30，底部：40，左侧：50}，
var保证金={
前30名，
右:30,，
底数：40，
左：50
},
高度=200，
宽度=900；
var color=“绿色”；
var xaxis_param=“mytime”；
var yaxis_param=“值”；
变量参数1={
保证金：保证金，
高度:高度,，
宽度：宽度，
颜色：颜色，
xaxis_param:xaxis_param，
yaxis_param:yaxis_param
};
绘制图形（数据，参数1）；
函数图（数据、参数）{
变量make_x_轴=函数（）{
返回d3.svg.axis（）
.刻度（x_刻度）
.orient（“底部”）
.蜱（5）；
};
变量make_y_轴=函数（）{
返回d3.svg.axis（）
.比例（y_比例）
.东方（“左”）
.蜱（5）；
};
//获得利润
var xaxis_param=params.xaxis_param；
var yaxis_param=params.yaxis_param；
var color_code=params.color；
var保证金=参数保证金；
变量高度=参数高度-margin.top-margin.bottom，
宽度=params.width-margin.left-margin.right；
var x_区段=d3.区段（数据，函数（d）{
返回d[xaxis_参数]
});
变量y_范围=d3.范围（数据、函数（d）{
返回d[yaxis_参数]
});
var x_scale=d3.time.scale（）
.域（x_范围）
.范围（[0，宽度]）；
变量y_scale=d3.scale.linear（）
.domain（[0，y_范围[1]]）
.范围（[高度，0]）；
var zoom=d3.behavior.zoom（）
.x（x_刻度）
.y（y_刻度）
。打开（“缩放”，缩放）；
//线
var line=d3.svg.line（）
.已定义（功能（d）{
返回d[yaxis_param]；
})
.x（功能（d）{
返回x_刻度（d[xaxis_参数]）；
})
.y（功能（d）{
返回y_刻度（d[yaxis_参数]）；
});
var lineRef=d3.svg.line（）
.x（功能（d）{
返回x_刻度（d[xaxis_参数]）；
})
.y（功能（d）{
返回y_标度（20）；
});
var myChart=d3。选择（'body'）。追加（'svg'））
.attr（'id'，'graph'）
.style（'background'，'#E7E0CB'）
.attr（'width'，width+margin.left+margin.right）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））
.呼叫（缩放）；
追加（“svg:rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“类”、“图”）；
变量图例=myChart.append（“g”）
.attr（“类”、“图例”）
.attr（“转换”、“平移”（“+5+”，“+（高度-25）+”））
图例。追加（“rect”）
.样式（“填充”，颜色代码）
.attr（“宽度”，20）
.attr（“高度”，20）；
图例。追加（“文本”）
.text（yaxis_参数）
.attr（“x”，25）
.attr（“y”，12）；
var vAxis=d3.svg.axis（）
.比例（y_比例）
.orient（'左'）
.滴答声（5）
var hAxis=d3.svg.axis（）
.刻度（x_刻度）
.orient（'底部'）
.蜱（5）；
var majorAxis=d3.svg.axis（）
.刻度（x_刻度）
.orient（'底部'）
.滴答声（d3.time.day，1）
.1尺寸（高度）
.outerTickSize（0）；
myChart.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（hAxis）；
myChart.append（“g”）
.attr（“类”、“x轴大调”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（majorAxis）；
myChart.append（“g”）
.attr（“类”、“y轴”）
.呼叫（vAxis）；
var circlePoint=myChart.selectAll（'circle'）
.数据（数据）
.输入（）
.附加（“圆圈”）；
变量CircleAttribute=circlePoint
.attr（“cx”，函数（d）{return x_scale（d[xaxis_param]）；}
.attr（“cy”，函数（d）{returny y_scale（d[yaxis_param]）；}）
.attr（“r”，3）
.style（“填充”、“无”）
.风格（“笔画”、“红色”）；
var clip=myChart.append（“svg:clipPath”）
.attr（“id”、“剪辑”）
.append（“svg:rect”）
.attr（“x”，0）
.attr（“y”，0）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var chartBody=myChart.append（“g”）
.attr（“剪辑路径”、“url（#剪辑）”）；
append（“svg:path”）
.基准（数据）
.attr（'类'，'行'）
.attr（“d”，行）
.attr（'笔划'，颜色代码）
.attr（'笔划宽度'，1）
.attr（'fill'，'none'）；
图表体
.append（'svg:path'）
.基准（数据）
.attr（'class'，'line1'）
.attr（“d”，lineRef）
.attr（'笔划'，'蓝色'）
.attr（'笔划宽度'，1）
.style（“笔划dashar
circlePoint
  .attr("cx", function (d) { return x_scale(d[xaxis_param]); })
  .attr("cy", function (d) { return y_scale(d[yaxis_param]); });