JSFiddle - React, Tailwind, and code Playground

by pmeran

JavaScript

var marbleBoxes = [
  { x: 50,  y: 50,  box: "box_01", n: 4, marbles: ["m_01", "m_02", "m_03", "m_04"]},
  { x: 200, y: 50, box: "box_02", n: 1, marbles: ["m_05"]},
  { x: 350, y: 50, box: "box_03", n: 5, marbles: ["m_06", "m_07", "m_08", "m_09", "m_10"]},
  { x: 500, y: 50, box: "box_04", n: 3, marbles: ["m_11", "m_12", "m_13"]}
];

var svg = d3.select("body")
  .append("svg")
  .attr("width", 800)
  .attr("height", 600)
  .attr("class", "svgClass");

var group = svg.selectAll("g")
  .data(marbleBoxes)
  .enter()
  .append("g")
  .attr("class", "gCont")
  .attr("id", function(d,i) {return i;})
  .attr("x", function(d) { return d.x;})
  .attr("y", function(d) { return d.y;})
  .attr("transform", "translate(0,0)");

group.append("rect")
  .attr("id", function(d) { return d.box;})
  .attr("x", function(d) { return d.x;})
  .attr("y", function(d) { return d.y;})
  .attr("height", 80)
  .attr("width", 120)
  .style("fill", "lightgray")
  .attr("class", "rectangle");

for (var i=0; i<4; i++) {
for (var j=0; j<marbleBoxes[i].n; j++ ) {
    var cx = marbleBoxes[i].x;
    console.log(cx);
    var cy = marbleBoxes[i].y;
    document.getElementsByClassName('gCont')[i].innerHTML+= '<circle cx="' + (10+cx) + '" cy="' + (10+cy+15*j) + '" r=7 id=' + marbleBoxes[i].marbles[j] + ' fill="red"></circle>'
}
}

var deltaX = 0;
var deltaY = 0;

var currentStart = [0,0];
var currentEnd = [0,0];

var idOnStart = -1;
var idOnEnd = -1;

var g = d3.selectAll("g")
.datum({
  x: 0,
  y: 0
})
.call(d3.drag()
    .on("start", function(d) {
      console.log('on start [d.x, d.y]', [d.x, d.y]);
      console.log('on start [d3.event.x, d3.event.y]', [d3.event.x, d3.event.y]);
      //idOnStart = d3.select(this).attr("id");
      //if (idOnStart!=idOnEnd) {
      //  console.log("DIFFERENT !");
      //} else {
      //  console.log("IDENTICAL !")}
    })
    .on("drag", function(d) {
      d3.select(this).attr("transform", "translate(" + 
        (d.x = d3.event.x + deltaX) + "," + (d.y =...