Javascript D3：通过叠加SVG检测鼠标滚轮事件

在下面的示例中，是否有方法让

zoomArea

检测鼠标滚轮事件，该事件在指向其中一个灰色圆圈时发生？这样做的目的是在执行此操作时不中断缩放行为。圆圈仍应能够接收指针事件，以便显示工具提示等

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（“填充”、“灰色”）
函数构建（）{
svg.select（“g.axis”）.call（xAxis）；
d3.选择全部（“圆圈”）
.attr（“cx”，功能（d）{
返回xScale（d）；
});
};    
也可以调用缩放圆

zoomArea.selectAll("circles")          
    .data(dataset)
  .enter()
  .append("circle")
  .attr("cx", function(d){
    return xScale(d);
  })
  .attr("cy", h/2)
  .attr("r",10)
  .attr("fill","grey")
  .call(zoom);//call zoom on circle

工作代码

希望这有帮助
 另一种方法：

首先制作一个带有填充背景的矩形，不要将缩放侦听器附加到该矩形上

var zoomRect = zoomArea.append("rect")
     .attr("x", padding)
     .attr("y", 0)
     .attr("width", w-2*padding)
     .attr("height", h-padding)
     .style("fill", "url(#dotPattern)")
     .style("cursor","move");//no zoom call

不要附加圆圈

zoomArea.selectAll("circles")          
    .data(dataset)
  .enter()
  .append("circle")
  .attr("cx", function(d){
    return xScale(d);
  })
  .attr("cy", h/2)
  .attr("r",10)
  .attr("fill","grey");

现在，将另一个矩形与第一个矩形相同，只是它具有缩放行为和透明填充

zoomArea.append("rect")
     .attr("x", padding)
     .attr("y", 0)
     .attr("width", w-2*padding)
     .attr("height", h-padding)
     .style("fill", "transparent")
     .style("pointer-events", "all")
     .style("cursor","move")
     .call(zoom);

工作示例

希望这也有帮助
 你能澄清一下“允许缩放工作”是什么意思吗？你想让灰色的圆圈放大吗？不，我想在可见的画布上有同样的放大行为。谢谢你指出这一点，我将修正这个问题。那很简单！Brilliant:）这在我的实际代码中不起作用，因为圆圈需要接收工具提示的指针事件。我没有想到在我的问题中提到这一点，很抱歉，这是一个很好的答案，尽管如此，它可能会帮助其他人。