当光标下没有SVG元素时，D3几何缩放

Question

我正在实现几何缩放行为，如example

所示

问题在于，如果光标位于绿色 overlay rect或任何其他SVG元素（线，圆等）之外的白点上，则鼠标轮事件会被浏览器拦截并向下滚动页面。

我希望能够独立于图像的自由放大。

这是一个简化的jsFiddle重新创建问题。

var width = 300,
    height = 300;

var randomX = d3.random.normal(width / 2, 80),
    randomY = d3.random.normal(height / 2, 80);

var data = d3.range(2000).map(function() {
  return [
    randomX(),
    randomY()
  ];
});

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .call(d3.behavior.zoom().scaleExtent([-8, 8]).on("zoom", zoom))
  .append("g");

svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("r", 2.5)
    .attr("transform", function(d) { return "translate(" + d + ")"; });

function zoom() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

Answer 1

希望这还不算太晚，我第一次错过了这个问题。

它在Chrome下无法运行的原因是因为Chrome还没有在html元素上实现标准CSS转换 - 并且理解起来很奇怪，SVG元素上最外面的<svg>标记嵌入在网页中的内容被视为用于布局目的的HTML元素。

您有两种选择：

1. 除常规转换语法外，还使用Chrome的自定义转换语法-webkit-transform：

   http://jsfiddle.net/aW9xC/5/

   有点跳跃，因为您正在转换整个SVG并相应地重新调整页面布局。由于原因，我不理解既不 CSS / webkit转换也不适用于SVG属性转换在应用于“innerSVG”元素时的工作。

2. 将嵌套的SVG结构替换为SVG <g>组元素，Chrome在转换时没有问题：

   http://jsfiddle.net/aW9xC/4/

Answer 2

在所有内容前面粘贴透明矩形，以便鼠标事件可以锁定。在SVG中，事件仅发送到渲染的元素（如rects），而不是发送到一般未渲染的背景。

svg.append("rect")
    .attr("fill", "none")
    .attr("pointer-events", "all")
    .attr("width", "100%")
    .attr("height", "100%");

为了使这项工作正常，SVG必须覆盖整个区域，以便获得与原始小提琴相同的外观，您可以通过设置clipPath或（正如我在小提琴中所做的那样，通过创建一个将剪辑的内容<svg>元素。

var svg = d3.select("body").append("svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .call(d3.behavior.zoom().scaleExtent([-8, 8]).on("zoom", zoom));

svg = svg.append("svg")
    .attr("width", width)
    .attr("height", height)

So altogether it looks like this...