D3 js: Как обновить дочерние элементы внутри <g>при использовании выбора bru sh?

Question

Я пытаюсь изменить макет dataviz, чтобы сгруппировать rect и a ниже элемента g. Дисплей работает, но когда я обновил свой bru sh selection все go в ад, так как событие, которое должно быть удалено с холста, не ...

Layout

<g class="zoomed-event" transform="translate(276,0)">
    <rect width="110" height="42">
    </rect>
    <a xlink:href="…" target="_blank" transform="translate(0, 0)">
        <text transform="translate(2,12)" class="event-label" text-anchor="start">…</text>
    </a>
</g>

Preview

Код события масштабирования

Ядро вспомогательных методов drawZoomedEvents minor:

  const zoomedEvents = zoomArea
    .selectAll('.zoomed-event')
    .data(visibleEvents, (d) => d)
    .attr('transform', (d) => `translate(${xEvent(d)},${y(d)})`)
    .enter()
    .append('g')
    .attr('class', 'zoomed-event')
    .attr('transform', (d) => `translate(${xEvent(d)},${y(d)})`)

  // eslint-disable-next-line no-unused-vars
  const rects = zoomedEvents
    .insert('rect')
    .attr('width', (d) => width(d))
    .attr('height', (d) => yStartPoint(1))
    .attr('style', (d) => colorize(d.lane))

  // eslint-disable-next-line no-unused-vars
  const links = zoomedEvents
    .insert('a')
    .attr('xlink:href', (d) => d.url)
    .attr('target', '_blank')
    .attr('transform', (d) => `translate(${xLink(d)}, 0)`)
    .append('text')
    .text((d) => title(d))
    .attr('transform', 'translate(2,12)')
    .attr('class', 'event-label')
    .attr('text-anchor', 'start')

  zoomedEvents.exit().remove()

  return zoomedEvents
}

Bru sh

Не уверен, что это необходимо, но я звоню drawZoomedEvents следующим образом:

const drawBrush = (data, { x, xStartPoint, yStartPoint }, zoomArea) => {
  const selection = d3.event && d3.event.selection
  if (!selection) return
  let [selectionStart, selectionEnd] = selection.map(x.invert)
  let visibleEvents = data.filter(
    (event) => event.end > selectionStart && event.start < selectionEnd
  )

  xStartPoint.domain([selectionStart, selectionEnd])

  drawZoomedEvents(zoomArea, visibleEvents, {
    xStartPoint,
    yStartPoint,
    selectionStart,
  })
}

Код

Репо с открытым исходным кодом: коронавирус -policies-timeline , см. ZoomedEvents. js file.