d3.dragが想定通りに機能しません

前提・実現したいこと

jsonデータを可視化した矩形をドラッグで移動させたい。

発生している問題・エラーメッセージ

それぞれの矩形に対するドラッグが、1つ目の矩形を対象としてしまいます。また、矩形は一枚ずつ並べることを想定していますが、同じ矩形がJsonデータの数だけ重なってしまいます。

こちらを参照お願いします:
https://codepen.io/****

各々の矩形に対して、dragが自然な振る舞いをするよう機能させるにはどのような変更が必要でしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

今の振る舞いでどうなっているのか知るべきです。

gタグが３つできています。

javascript
1    const svg = d3
2      .select("#heatmap")
3      .append("svg")
4      .attr("width", width)
5      .attr("height", height)
6      .attr("transform", `translate(${margin.left}, ${margin.top})`)
7      .selectAll("g")
8      .data(data)
9      .enter()
10      .append("g")
11      .call(drag)

data(data).enter().append("g")
でjson分だけgを作っていますが

javascript
1    svg.selectAll("g").data(data).enter()
2      .append("rect")
3      .attr("id", "block")
4      .attr("class", "block")
5      .attr("x", (d, i) => blocksize * (i % colsize)) // relative to 'svg'
6      .attr("y", (d, i) => blocksize * (data[i].row - 1)) // relative to 'svg'
7      .attr("width", blocksize)
8      .attr("height", blocksize)
9      .attr("fill", "#d00a")
10      .style("opacity", 0.5)
11      .attr("stroke", "#000")
12      .attr("stroke-width", "2")
13

ここで各々のgに対してさらにdata(data).enter().append("rect")
しているのでg×3,rect×3になっています。textも同様です。

おそらく方針としては「g×3の中にそれぞれrect×1」でしょう。

名前が少しわかりにくくなっていますが
const svgに入っているのはgです。
gに対してappendすればいいので

javascript
1    svg
2//.selectAll("g").data(data).enter()  束縛不要
3      .append("rect")
4      .attr("id", "block")
5//以下略
6
7    svg
8        //.selectAll("g").data(data).enter()  束縛不要
9      .append("text")
10      .attr("id", "text")
11//以下略