JSFiddle - React, Tailwind, and code Playground

by longsonr

JavaScript

var svg = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 500);

// Add a group to the canvas
var group = svg.append("svg:g")
    .attr("id", "group")
    .attr("transform", "translate(10, 10)")
    .on("mousedown", animate);

var rect = group.append("svg:rect")
    .attr("x", 1)
    .attr("y", 1)
    .attr("id", "rect")
    .attr("width", 200)
    .attr("height", 100)
    .style("fill", 'white')
    .style("stroke", "blue")


var myHtml = group.append("foreignObject")
    .attr("x", 20)
    .attr("y", 20)
    .attr("width", 180)
    .attr("height", 80)
    .attr("id", "fobject")
    .append("xhtml:div")
    .style("font", "14px 'Helvetica Neue'")
    .html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.")
    .on("mousedown", animate);

function animate() {
    d3.select("#group").transition()
    .duration(1000)
    .attr("transform", "translate(100, 100)")
};