D3 Responsive chart - svg

Question

I want to create a responsive chart in D3.js without using viewBox. I want to avoid it because I had some problems when I added tooltips to the chart. I started with a great tutorial, but I cant continue following the same logic.
Anyone can help me why is it not drawing both of the lines (const axis, absAxis)? I tried to join/append to the svg, to the rect, but did not work.
function myResponsiveChart(container, props) {
const { width, height } = props;
let svg = container.selectAll('svg').data([null]);
svg = svg.enter().append('svg').merge(svg)
.attr('width', width)
.attr('height', height);
const rect = svg.selectAll('rect').data([null]);
rect.enter().append('rect').merge(rect)
.attr('width', width)
.attr('height', height)
.attr('rx', 100);
const fontSize = 16,
hPix = height/6,
margin = { top: hPix/2, bottom: hPix/2, left: hPix/10, right: hPix/2 };
//DELTA
//svg.append('line').merge(svg)
const axis = svg.selectAll('line').data([null]);
axis.join('line').append('line').merge(axis)
.attr("x1", margin.left)
.attr("x2", width)
.attr("y1", margin.top)
.attr("y2", margin.top)
.attr("class", "diff_axis");
let axis = svg.select('line').data([null]);
axis.enter().append('line').merge(axis)
.attr("x1", margin.left)
.attr("x2", width)
.attr("y1", margin.top)
.attr("y2", margin.top)
.attr("class", "diff_axis");
//ABSOLUTE
//svg.append('line').merge(svg)
let absAxis = svg.selectAll('line').data([null]);
absAxis.enter().append('line').merge(absAxis)
.attr("x1", margin.left)
.attr("x2", width)
.attr("y1", margin.top + hPix)
.attr("y2", margin.top + hPix)
.attr("class", "diff_axis")
.attr("id", "abs");
}
function render() {
myResponsiveChart(d3.select('body'), {
width: document.body.clientWidth,
height: document.body.clientHeight
});
}
render();
window.addEventListener('resize', render);
body {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: 0px;
padding: 0px;
}
.diff_axis {
stroke: red;
stroke-width: 6;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
strong text

Answer 1

This works
When you define a constraint, you cannot redefine it or change its value.
function myResponsiveChart(container, props) {
const { width, height } = props;
let svg = container.selectAll('svg').data([null]);
svg = svg.enter().append('svg').merge(svg)
.attr('width', width)
.attr('height', height);
const rect = svg.selectAll('rect').data([null]);
rect.enter().append('rect').merge(rect)
.attr('width', width)
.attr('height', height)
.attr('rx', 100);
const fontSize = 16,
hPix = height/6,
margin = { top: hPix/2, bottom: hPix/2, left: hPix/10, right: hPix/2 };
//DELTA
//svg.append('line').merge(svg)
const axis = svg.selectAll('line').data([null]);
axis.join('line').append('line').merge(axis)
.attr("x1", margin.left)
.attr("x2", width)
.attr("y1", margin.top)
.attr("y2", margin.top)
.attr("class", "diff_axis");
//ABSOLUTE
//svg.append('line').merge(svg)
let absAxis = svg.selectAll('line').data([null]);
absAxis.enter().append('line').merge(absAxis)
.attr("x1", margin.left)
.attr("x2", width)
.attr("y1", margin.top + hPix)
.attr("y2", margin.top + hPix)
.attr("class", "diff_axis")
.attr("id", "abs");
}
function render() {
myResponsiveChart(d3.select('body'), {
width: document.body.clientWidth,
height: document.body.clientHeight
});
}
render();
window.addEventListener('resize', render);
body {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: 0px;
padding: 0px;
}
.diff_axis {
stroke: red;
stroke-width: 6;
}
<script src="https://d3js.org/d3.v5.min.js"></script>