JSFiddle - React, Tailwind, and code Playground
JavaScript
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
// Add a group to the canvas
var group = svg.append("svg:g")
.attr("transform", "translate(10, 10)")
.attr("id", "group");
var rect1 = group.append("svg:rect")
.attr("rx", 6)
.attr("ry", 6)
.attr("x", 5/2)
.attr("y", 5/2)
.attr("id", "rect")
.attr("width", 250)
.attr("height", 125)
.style("fill", 'white')
.style("stroke", d3.scale.category20c())
.style('stroke-width', 5);
var html1 = group.append("foreignObject")
.attr("x", 50)
.attr("y", 25)
.attr("width", 200)
.attr("height", 100)
.attr("id", "fobject")
.style("border-color", d3.scale.category20c())
.append("xhtml:div")
.style("font", "14px 'Helvetica Neue'")
.html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.");
var innerSvg = svg.append("svg")
.attr("x", 500)
.attr("y", 10)
.attr("id", "innerSvg");
var rect2 = innerSvg.append("svg:rect")
.attr("rx", 6)
.attr("ry", 6)
.attr("x", 5/2)
.attr("y", 5/2)
.attr("id", "rect")
.attr("width", 250)
.attr("height", 125)
.style("fill", 'white')
.style("stroke", d3.scale.category20c())
.style('stroke-width', 5);
var html2 = innerSvg.append("foreignObject")
.attr("x", 50)
.attr("y", 25)
.attr("width", 200)
.attr("height", 100)
.attr("id", "fobject")
.style("border-color", d3.scale.category20c())
.append("xhtml:div")
.style("font", "14px 'Helvetica Neue'")
.html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.");
var drag1 = d3.behavior.drag()
.origin(function() {
var t = d3.select(this);
return {x: t.attr("x") + d3.transform(t.attr("transform")).translate[0],
y: t.attr("y") + d3.transform(t.attr("transform")).translate[1]};
})
.on("drag", function(d,i) {
...