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);