D3缩放消耗事件并防止鼠标

Question

我正在尝试在D3中制作既可以放大又可以悬停的D3中的流图。

从阅读中，我看到从V4 D3变焦开始会消耗事件，因此可能是我的鼠标事件不再触发的原因，但是我设置的重新排序或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

为什么不起作用的假设是正确的(Zoom容器消耗事件(，修复程序就是仅删除zoomContainer并将Zoom应用于SVG而代替。/p>

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