Drag rect not working as expected - d3.js

Question

I have created a d3 visualization that takes an json data, create a rect for each data point, and then displays the text in the rect. However, drag
works only for the 1st rect.
I am wondering how to acts a natural drag action for each rect.
my codepen project: https://codepen.io/moriakijp/project/editor/ZRnVwr
here is the code:
drawNumbers = layout => {
const width = innerWidth;
const height = width * 0.5;
const margin = {
top: height * 0.05,
bottom: height * 0.05,
left: width * 0.05,
right: width * 0.05
};
d3.json(layout).then(data => {
const colsize = data[data.length-1].col;
const rowsize = data[data.length-1].row;
const blocksize = colsize < rowsize ?
(width - margin.left - margin.right) / colsize:
(height - margin.left - margin.right) / rowsize;
function dragstarted(d) {
}
function dragged(d) {
d3
.select(this)
.select("rect")
.attr("x", (d.x = d3.event.x))
.attr("y", (d.y = d3.event.y));
d3
.select(this)
.select("text")
.attr("x", (d.x = d3.event.x))
.attr("y", (d.y = d3.event.y));
}
const dragended = (d) => {
}
const drag = d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
const svg = d3
.select("#heatmap")
.append("svg")
.attr("width", width)
.attr("height", height)
.attr("transform", `translate(${margin.left}, ${margin.top})`)
.selectAll("g")
.data(data)
.enter()
.append("g")
.call(drag)
svg
.selectAll("g")
.data(data)
.enter()
.append("rect")
.attr("id", "block")
.attr("class", "block")
.attr("x", (d, i) => blocksize * (i % colsize)) // relative to 'svg'
.attr("y", (d, i) => blocksize * (data[i].row - 1)) // relative to 'svg'
.attr("width", blocksize)
.attr("height", blocksize)
.attr("fill", "#d00a")
.style("opacity", 0.5)
.attr("stroke", "#000")
.attr("stroke-width", "2")
svg
.selectAll("g")
.data(data)
.enter()
.append("text")
.attr("id", "text")
.attr("class", "text")
.text(d => `${d.char}`)
.attr("x", (d, i) => blocksize * (i % colsize))
.attr("y", (d, i) => blocksize * (data[i].row - 1))
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.attr("fill", "#333")
.attr("dx", blocksize / 2)
.attr("dy", blocksize / 2)
.style("font-size", blocksize / 2 );
});
};
drawNumbers('number.json');

Answer 1

You aren't quite using the enter pattern correctly if you want to take "data, create a rect for each data point, and then displays the text in the rect."
Let's break down what you have:
const svg = d3
.select("#heatmap")
.append("svg")
.attr("width", width)
.attr("height", height)
.attr("transform", `translate(${margin.left}, ${margin.top})`)
.selectAll("g")
.data(data)
.enter()
.append("g")
.call(drag)
Here you select the element with id heatmap append an svg, and then enter a g for each item in your data array. As such, svg is a selection of three g elements, and you call the drag on these g elements.
Next you take this selection of three g elements and select child g elements. As there are no child g elements (this is an empty selection), entering and appending (rects), creates three child rectangles for each g in the selection svg:
svg
.selectAll("g")
.data(data)
.enter()
.append("rect")
....
You do the same thing with the text. Now we have 9 rectangles and 9 texts, three each in each of the parent g elements (held the selection svg). Each of those parent g elements has a drag function that positions the first rectangle in it:
d3
.select(this)
.select("rect") // select first matching element
.attr("x", (d.x = d3.event.x))
.attr("y", (d.y = d3.event.y));
As each g has three rectangles, only the first one will be moved.
One solution would be to not do an enter cycle for each g in svg: your data is not nested, we already have a g for each item in the data array. So we just need to append a single text element and a single rect element to each g:
svg.append("rect").attr("x", function(d) {...
The data bound originally to the g is also bound to this child element, no need to rebind data. Though, I'd rename svg to something else so that it is more reflective of its role and contents though.
Overall this might look something like:
const g = d3
.select("#heatmap")
.append("svg")
.attr("width", width)
.attr("height", height)
.attr("transform", `translate(${margin.left}, ${margin.top})`)
.selectAll("g")
.data(data)
.enter() // create a g for each item in the data array
.append("g")
.call(drag)
// add a rect to each g
g.append("rect")
.attr("id", "block")
.attr("class", "block")
.attr("x", (d, i) => blocksize * (i % colsize)) // relative to 'svg'
.attr("y", (d, i) => blocksize * (data[i].row - 1)) // relative to 'svg'
.attr("width", blocksize)
.attr("height", blocksize)
.attr("fill", "#d00a")
.style("opacity", 0.5)
.attr("stroke", "#000")
.attr("stroke-width", "2")
// add text to each g
g.append("text")
.attr("id", "text")
.attr("class", "text")
.text(d => `${d.char}`)
.attr("x", (d, i) => blocksize * (i % colsize))
.attr("y", (d, i) => blocksize * (data[i].row - 1))
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.attr("fill", "#333")
.attr("dx", blocksize / 2)
.attr("dy", blocksize / 2)
.style("font-size", blocksize / 2 );
Here's a running example with the above modification.