JSFiddle - React, Tailwind, and code Playground

by Gerardo Furtado

JavaScript

var testdata1 = [
[
  {x: 1, y: 40},
  {x: 2, y: 43},
  {x: 3, y: 12},
  {x: 4, y: 60},
  {x: 5, y: 63},
  {x: 6, y: 23}
], [
  {x: 1, y: 12},
  {x: 2, y: 5},
  {x: 3, y: 23},
  {x: 4, y: 18},
  {x: 5, y: 73},
  {x: 6, y: 27}
], [
  {x: 1, y: 60},
  {x: 2, y: 49},
  {x: 3, y: 16},
  {x: 4, y: 20},
  {x: 5, y: 92},
  {x: 6, y: 20}
 ] 
];

var svg = d3.select("body")
	.append("svg")
  .attr("width", 300)
  .attr("height", 300);
  
var grps = svg.selectAll(".grps")
    .data(testdata1)
    .enter()
    .append("g");
    
var subsel = grps.selectAll("rect")
    .data(function(d) {return d})
    .enter()
    .append("rect");
    
subsel.attr("foobar", function(d,i,j) {console.log("before: x=" + d.x + " y=" + d.y + " i=" + i + " j=" + j)})
    .transition()
    .attr("foobar", function(d,i,j) {console.log("after: x=" + d.x + " y=" + d.y + " i=" + i + " j=" + j)})