Javascript d3：应用scale（）变换时元素移动

我希望SVG元素在鼠标上方显示得更大。应用CSS转换似乎是一种方便的方法，但是它也会转换对象。如何使下面示例中的圆保持其原始中心点？我试过应用

位置：绝对无效


var数据集=[0234578600001000000000]；
var svg=d3.选择（“主体”）.追加（“svg”）；
var w=500，h=200；
var=50；
svg.attr（“宽度”，w）
.attr（“高度”，h）；
//背景图案
var-patternSize=5；
svg.append（“defs”）
.append（“模式”）
.attr（“id”、“点模式”）
.attr（“patternUnits”、“userSpaceOnUse”）
.attr（“宽度”，图案大小）
.attr（“高度”，图案大小）
.附加（“圆圈”）
.attr（“cx”，图案尺寸/2）
.attr（“cy”，图案尺寸/2）
.attr（“r”，2）
.style（“笔划”、“无”）
.样式（“填充”、“浅灰色”）
.样式（“不透明度”，0.5）；
var xScale=d3.time.scale（）
.domain（[0，1000000000]）
.范围（[填充，w-填充]）；
var xAxis=d3.svg.axis（）
.scale（xScale）
.蜱（5）；
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”+（h填充）+>）
.呼叫（xAxis）；
var zoom=d3.behavior.zoom（）
.on（“缩放”，构建）
.scaleExtent（[1,20]）；
zoom.x（xScale）；
var clipPath=svg.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“x”，填充）
.attr（“y”，0）
.attr（“宽度”，w-2*填充）
.attr（“高度”，h-填充）；
var zoomArea=svg.append（“g”）
.attr（“类”、“zoomArea”）
.style（“光标”、“移动”）
.attr（“剪辑路径”、“url（#剪辑）”）；
var zoomRect=zoomArea.append（“rect”）
.attr（“x”，填充）
.attr（“y”，0）
.attr（“宽度”，w-2*填充）
.attr（“高度”，h-填充）
.style（“填充”、“url（#点模式）”）
.style（“指针事件”、“全部”）
.style（“光标”、“移动”）
.呼叫（缩放）；
zoomArea.selectAll（“圆圈”）
.数据（数据集）
.输入（）
.附加（“圆圈”）
.attr（“cx”，功能（d）{
返回xScale（d）；
})
.attr（“cy”，h/2）
.attr（“r”，10）
.attr（“填充”、“灰色”）
.on（“鼠标悬停”，函数（）{
d3.选择（本）
.attr（“变换”、“比例（1.4）”）
})
.on（“mouseout”，函数（）{
d3.选择（本）
.attr（“变换”、“缩放（1）”）
});
函数构建（）{
svg.select（“g.axis”）.call（xAxis）；
d3.选择全部（“圆圈”）
.attr（“cx”，功能（d）{
返回xScale（d）；
});
};    
解决此问题有两种可能的方法

1。要缩放圆而不改变其位置，请执行以下操作

平移（-centerX*（因子-1），-centerY*（因子-1））比例（因子）

工作小提琴1:


var数据集=[0234578600001000000000]；
var svg=d3.选择（“主体”）.追加（“svg”）；
var w=500，
h=200；
var=50；
svg.attr（“宽度”，w）
.attr（“高度”，h）；
//背景图案
var-patternSize=5；
svg.append（“defs”）
.append（“模式”）
.attr（“id”、“点模式”）
.attr（“patternUnits”、“userSpaceOnUse”）
.attr（“宽度”，图案大小）
.attr（“高度”，图案大小）
.附加（“圆圈”）
.attr（“cx”，图案尺寸/2）
.attr（“cy”，图案尺寸/2）
.attr（“r”，2）
.style（“笔划”、“无”）
.样式（“填充”、“浅灰色”）
.样式（“不透明度”，0.5）；
var xScale=d3.time.scale（）
.domain（[0，1000000000]）
.范围（[填充，w-填充]）；
var xAxis=d3.svg.axis（）
.scale（xScale）
.蜱（5）；
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”+（h-填充）+”）
.呼叫（xAxis）；
var zoom=d3.behavior.zoom（）
.on（“缩放”，构建）
.scaleExtent（[1,20]）；
zoom.x（xScale）；
var clipPath=svg.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“x”，填充）
.attr（“y”，0）
.attr（“宽度”，w-2*填充）
.attr（“高度”，h-填充）；
var zoomArea=svg.append（“g”）
.attr（“类”、“zoomArea”）
.style（“光标”、“移动”）
.attr（“剪辑路径”、“url（#剪辑）”）；
var zoomRect=zoomArea.append（“rect”）
.attr（“x”，填充）
.attr（“y”，0）
.attr（“宽度”，w-2*填充）
.attr（“高度”，h-填充）
.style（“填充”、“url（#点模式）”）
.style（“指针事件”、“全部”）
.style（“光标”、“移动”）
.呼叫（缩放）；
zoomArea.selectAll（“圆圈”）
.数据（数据集）
.输入（）
.附加（“圆圈”）
.attr（“cx”，功能（d）{
返回xScale（d）；
})
.attr（“cy”，h/2）
.attr（“r”，10）
.attr（“填充”、“灰色”）
.on（“鼠标悬停”，功能（d）{
var x=x标度（d），
y=h/2，
系数=2；
var tx=-x*（系数-1），
ty=-y*（因子-1）；
d3.选择（this）.transition（）.持续时间（50）
.attr（“变换”、“平移”（+tx+）、“+ty+”）比例（“+factor+”））；
})
.on（“鼠标移动”，功能（d）{
var x=x标度（d），
y=h/2，
系数=1；
var tx=-x*（系数-1），
ty=-y*（因子-1）；
d3.选择（this）.transition（）.持续时间（50）
.attr（“变换”、“平移”（+tx+）、“+ty+”）比例（“+factor+”））；
});
函数构建（）{
svg.select（“g.axis”）.call（xAxis）；
d3.选择全部（“圆圈”）
.attr（“cx”，功能（d）{
返回xScale（d）；
});
};