Как я могу изменить масштаб прямоугольника при увеличении по оси X

Question

Я работаю над проектом с D3. js и пытаюсь создать запрещенную область на моем графике. Вот сценарий:

На диаграмме должны быть показаны некоторые линии, основанные на почтовых индексах, но у нас есть область, которую нельзя использовать по n причинам, и я должен создать какой-то способ скрыть / отказать пользователю в сделайте что-нибудь в этой области.

https://jsfiddle.net/u3z1s2vt -> Мой последний пример кода

Когда я выполняю функцию масштабирования, я ожидаю, что прямоугольник возвращается на тот же x1 и x2 позиция, которую я передал на forbiddenArea.x1 и forbiddenArea.x1 , но прямоугольник использует ширину / высоту как x2 и y2 .

Когда я впервые создаю прямоугольник, он отлично работает. Но когда я изменяю размер с помощью zoom / pan, возвращаемое поведение не ожидается.

scatter
    .append("rect")
    .attr("id", "forbidden")
    .attr("x", x(forbiddenArea.x1))
    .attr("y", y(graphData.length))
    .attr("width", x(forbiddenArea.x2 - forbiddenArea.x1))
    .attr("height", y(0));

При обновлении

let newX = d3.event.transform.rescaleX(x);
let newY = d3.event.transform.rescaleY(y);

scatter
      .select("#forbidden")
      .attr("x", newX(forbiddenArea.x2 - forbiddenArea.x1))
      .attr('y',newY(graphData.length))
      .attr("width", newX(forbiddenArea.x2))

Идея - это всегда пользовательский масштаб, прямоугольник следует за X значения.

Есть идеи?