get selected element id from d3.drag function call

When dragging, in the dragged function call, two parameters are given: event and d

How can I get the selected element index?

In the code below the dragged function is not working since the index of dragged element not correct!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

drag_nodes()

function drag_nodes() {
		var data = {
				nodes: [{
						name: "A",
						x: 200,
						y: 150
				}, {
						name: "B",
						x: 140,
						y: 300
				}, {
						name: "C",
						x: 300,
						y: 300
				}, {
						name: "D",
						x: 300,
						y: 180
				}],
				links: [{
						source: 0,
						target: 1
				}, {
						source: 1,
						target: 2
				}, {
						source: 2,
						target: 3
				}, ]
		};

		var c10 = d3.scaleOrdinal(d3.schemeCategory10);
		var svg = d3.select("body")
				.append("svg")
				.attr("width", 1200)
				.attr("height", 800);

		var drag = d3.drag()
				.on("start", dragstarted)
				.on("drag", dragged)
				.on("end", dragended);

		function dragstarted(event, d) {
				d3.select(this).raise().attr("stroke", "black");
		}

		function dragged(event, d) {
				d.x += event.dx
				d.y += event.dy
				d3.select(this).attr("cx", d.x).attr("cy", d.y);
				links.each(function(e, i) {
						var idx = 0 // select element idx
						if (e.source == idx) {
								d3.select(this).attr("x1", d.x).attr("y1", d.y);
						}else if (e.target == idx) {
								d3.select(this).attr("x2", d.x).attr("y2", d.y);
						}
				});
		}

		function dragended(event, d) {
				d3.select(this).attr("stroke", null);
		}
	
		var links = svg.selectAll("link")
				.data(data.links)
				.enter()
				.append("line")
				.attr("class", "link")
				.attr("x1", function(l) {
						var sourceNode = data.nodes.filter(function(d, i) {
								return i == l.source
						})[0];
						d3.select(this).attr("y1", sourceNode.y);
						return sourceNode.x
				})
				.attr("x2", function(l) {
						var targetNode = data.nodes.filter(function(d, i) {
								return i == l.target
						})[0];
						d3.select(this).attr("y2", targetNode.y);
						return targetNode.x
				})
				.attr("fill", "none")
				.attr("stroke", "black");

		var nodes = svg.selectAll("node")
				.data(data.nodes)
				.enter()
				.append("circle")
				.attr("class", "node")
				.attr("cx", function(d) {
						return d.x
				})
				.attr("cy", function(d) {
						return d.y
				})
				.attr("r", 15)
				.attr("fill", function(d, i) {
						return c10(i);
				})
				.call(drag);
}

<!-- language: lang-html -->

<script src="https://d3js.org/d3.v7.min.js"></script>

<!-- end snippet -->

The index is not part of either the event or d arguments.

Two options can be considered:

Update your data.nodes objects to include an idx property with:

data.nodes.forEach((n, i) => n.idx = i);

And then in the .each loop you can simply have:

var idx = d.idx;

Or, if you need to get the index (idx) dynamically, in the .each loop use:

var idx = data.nodes.findIndex(l => l.name === d.name);

Option 1 is below:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

drag_nodes()
function drag_nodes() {
var data = {
nodes: [{
name: "A",
x: 200,
y: 150
}, {
name: "B",
x: 140,
y: 300
}, {
name: "C",
x: 300,
y: 300
}, {
name: "D",
x: 300,
y: 180
}],
links: [{
source: 0,
target: 1
}, {
source: 1,
target: 2
}, {
source: 2,
target: 3
}, ]
};
// option 1
data.nodes.forEach((n, i) => n.idx = i);
var c10 = d3.scaleOrdinal(d3.schemeCategory10);
var svg = d3.select("body")
.append("svg")
.attr("width", 1200)
.attr("height", 800);
var drag = d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
function dragstarted(event, d) {
d3.select(this).raise().attr("stroke", "black");
}
function dragged(event, d) {
d.x += event.dx
d.y += event.dy
d3.select(this).attr("cx", d.x).attr("cy", d.y);
links.each(function(e, i) {
var idx = d.idx; // option 1
// var idx = data.nodes.findIndex(l => l.name === d.name); // option 2
if (e.source == idx) {
d3.select(this).attr("x1", d.x).attr("y1", d.y);
}else if (e.target == idx) {
d3.select(this).attr("x2", d.x).attr("y2", d.y);
}
});
}
function dragended(event, d) {
d3.select(this).attr("stroke", null);
}
var links = svg.selectAll("link")
.data(data.links)
.enter()
.append("line")
.attr("class", "link")
.attr("x1", function(l) {
var sourceNode = data.nodes.filter(function(d, i) {
return i == l.source
})[0];
d3.select(this).attr("y1", sourceNode.y);
return sourceNode.x
})
.attr("x2", function(l) {
var targetNode = data.nodes.filter(function(d, i) {
return i == l.target
})[0];
d3.select(this).attr("y2", targetNode.y);
return targetNode.x
})
.attr("fill", "none")
.attr("stroke", "black");
var nodes = svg.selectAll("node")
.data(data.nodes)
.enter()
.append("circle")
.attr("class", "node")
.attr("cx", function(d) {
return d.x
})
.attr("cy", function(d) {
return d.y
})
.attr("r", 15)
.attr("fill", function(d, i) {
return c10(i);
})
.call(drag);
}

<!-- language: lang-html -->

<script src="https://d3js.org/d3.v7.min.js"></script>

<!-- end snippet -->