Custom shapes/paths not changing after domain is changed from zoom

I’m trying to implement zoom functionality for a timeline, but when I zoom in only the y-axis itself changes. I am expecting the custom path elements which I draw on the right to also change. So when I zoom in/out on the chart, I expect the shapes on the right to increase/decrease in length.

EXAMPLE: https://jsfiddle.net/jgjcz78w/

My zoom function uses the d3.event.transform to grab the context which allows me to change the domain:

function zoomed() {
  var t = d3.event.transform;
  timeline.y.domain(t.rescaleY(timeline.y).domain());

  timeline.updateVis();
}

You’ll notice I call timeline.updateVis(); which should then go through and update the visualization, but nothing is happening. It makes me think my Enter, Update, Exit logic could be broken, but can’t track down why.

NOTE: This is v4 of D3.

I used this block from Mike Bostock as a guide: https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

[neuquen]

Thanks @mbostock! I really appreciate your help. Keep up the great work with D3!

[mbostock]

[Sorry for the repeated comment; again the GitHub mobile interface got into a weird state and reposted a draft of my earlier comment.]

Is there no way to use the Enter/Update logic to handle redrawing custom shapes?

There absolutely is! You should use the update selection to update existing elements, rather than just the enter selection as you are doing currently. Your hack to blow everything away before the data-join is just a correction for the real issue, which is that you’re only handling enter: by removing all elements before the join, you’re forcing everything into enter.

Unfortunately I can’t afford to dissect your code further and walk you through the data-join. I recommend you study the General Update Pattern thread. (The How Selections Work tutorial might also be relevant, albeit it’s slightly out-of-date for v4 since it doesn’t cover selection.merge, and there are a few more join-related tutorials linked from the wiki.)

More generally, please use Stack Overflow tag d3.js to ask for help. Although I make an effort to assist everyone that asks, I am not always available to provide help promptly or directly. Stack Overflow provides a better collaborative forum for self-help: tens of thousands of D3-related questions have already been asked there, and some answered questions may be relevant to you. Also consider the d3-js Google Group or joining the d3-js Slack. Thank you! 🤗