d3 zoom消耗事件并防止鼠标悬停

Question

我试图在d3中创建一个可缩放的流图，并且路径可以移动。

从阅读中我看到，从v4开始d3 zoom会消耗事件，因此可能是我的mouseover事件不再触发的原因，但是没有重新排序或pointer-events: all我设置的pointer-events: all似乎都有效。

在下面的例子中，是否有人能够帮助我理解我必须做什么才能让我的缩放和悬停工作？ （ 这个示例还有一个代码框 ）

const width = 500;
const height = 500;

let numberOfDataPoints = 5;
const numberOfLayers = 3;

let data = [];

for (let i = 0; i < numberOfDataPoints; i++) {
  let point = [];
  for (let j = 0; j < numberOfLayers; j++) {
    point.push(Math.floor(Math.random() * Math.floor(120)));
  }

  data.push(point);
}

const x = d3
  .scaleLinear()
  .domain([0, numberOfDataPoints - 1])
  .range([0, width]);
const y = d3.scaleLinear().range([height, 0]);

const area = d3
  .area()
  .x((d, i) => x(i))
  .y0(d => y(d[0]))
  .y1(d => y(d[1]));

const stack = d3
  .stack()
  .keys(d3.range(numberOfLayers))
  .offset(d3.stackOffsetWiggle)
  .order(d3.stackOrderNone);

let layers = stack(data);
y.domain([
  d3.min(layers, l => d3.min(l, d => d[0])),
  d3.max(layers, l => d3.max(l, d => d[1]))
]);

update();

const zoomContainer = d3
  .select('svg')
  .append('rect')
  .attr('width', width)
  .attr('height', height)
  .attr('fill', 'none')
  .style('pointer-events', 'all');

const zoom = d3
  .zoom()
  .scaleExtent([1, 8])
  .on('zoom', zoomed);

zoomContainer.call(zoom);

function update() {
  let path = d3
    .select('svg')
    .selectAll('path')
    .data(layers);

  path
    .enter()
    .append('path')
    .attr('fill', 'red')
    .merge(path)
    .attr('d', d => area(d))
    .on('mouseover', () => {
      d3.select('svg')
        .selectAll('path')
        .attr('fill', 'red');
      d3.select(d3.event.target).attr('fill', 'green');
    });
}

function zoomed() {
  let transform = d3.event.transform;

  transform.y = 0;

  let updatedScale = transform.rescaleX(x);
  d3.select('svg')
    .selectAll('path')
    .attr('d', area.x((d, i) => updatedScale(i)));
}

Answer 1

为什么这不起作用的假设是正确的（缩放容器消耗事件），修复只是删除zoomContainer并将缩放应用于svg而不是

const zoom = d3
  .zoom()
  .on('zoom', zoomed);

d3.select('svg').call(zoom);