How to do Multiple Selection of Timeline Segments using Cursor Drag (click+Drag) and Handling the selection of those segments to store the info and update their UI based on our logic

[shashimayaai]

I want to do selection of multiple segments of timeline chart. I need to have an event callback similar to onSegmentClick([function]). User shall be able to click on a segment and drag. It shall be able to do multiselection similar to Microsoft excel sheet cells.
If there is drag event in timeline chart, I intend to have a handler for it and write my logic in that. Is there such a function ?
If drag event does not exist at the level of timeline event, should I handle mouse click, mouse move and mouse up myself and simulate event?

onNgOnInit {
console.log("svg representation " + this.mychart.getSvg()); this.mychart.getSvg(); var svg = d3.select("svg")          .on("drag", this.startDrag); }
function startDrag(evt) { console.log("Start drag event fired "); }
Questions:

1. It is not working. Do we have event called 'drag' ? Or should it be simulated?
2. If drag event is not available in SVG, how to simulate that? I want to get drag event along with information of the specific element on which user clicks.