I am using this working code as a starter. I am trying to modify according to my data and need.

The only thing I ain't getting is why this zoom in zoom out not working. I tried this solution but got no luck.

I ain't able to find where the problem is within the code but I can see the comment where it stated that the functionality is deactivated. How can I make it activated? Sorry if this is a silly question I am still a newbie in js. There are similar questions too but the thing is jsfiddle are not working anymore so I can't see the whole code to understand the logic.

// Zoom functionality is deactivated (user can use browser Ctrl + mouse wheel shortcut)
function zoomAndDrag() {
    //var scale = d3.event.scale,
    var scale = 1,
        translation = d3.event.translate,
        tbound = -height * scale,
        bbound = height * scale,
        lbound = (-width + margin.right) * scale,
        rbound = (width - margin.left) * scale;
    // limit translation to thresholds
    translation = [
        Math.max(Math.min(translation[0], rbound), lbound),
        Math.max(Math.min(translation[1], bbound), tbound)
    ];
    d3.select('.drawarea')
        .attr('transform', 'translate(' + translation + ')' +
              ' scale(' + scale + ')');
}

Here is the working demo with the code: https://blockbuilder.org/ninjakx/2c4e726a531b40f9f09d7df41217d1de