Using d3 selection.join to create a new line each time - d3.js

Question

In the d3 examples of selection.join it seems there is an assumption that you already have a path to manipulate:
svg.selectAll("path")
.data([dataset])
.join(
enter => enter.append("path").attr("class", "line"),
update => update,
exit => exit.remove()
)
.attr("d", line);
However, I'd like to create a re-usable class component which creates a new line each time for that specific data. It should not interfere with other paths that may or may not be present in the entire graph.
const lineGenerator = d3
.line<DataPoint>()
.y((d) => yScale(d.value))
.x((d) => xScale(d.date));
mainSvg.selectAll('path')
.data([data])
.join(
enter =>
enter
.append('path')
.attr('class', 'line')
.attr('stroke', 'black'),
).attr('d', lineGenerator)
What I now see happening in a graph that already has a path somewhere is that that occurance is replaced with this new line. How would you typically solve this in d3?

Answer 1

Found a possible solution. Not sure if this is the way to go:
const lineGenerator = d3
.line<DataPoint>()
.y((d) => yScale(d.value))
.x((d) => xScale(d.date));
mainSvg.selectAll('#my-unique-id')
.data([data])
.join(
enter =>
enter
.append('path')
.attr('id', 'my-unique-id')
.attr('stroke', 'black'),
).attr('d', lineGenerator)
It looks like you can select something that is non-existent. If d3 can't find that occurrence it will create that instance.
Using a unique id for the new path you can make sure only the occurance is redrawn that you want to target.
I'm not sure if there are any caveats to this method, so any tips are appreciated.