JSFiddle - React, Tailwind, and code Playground

by Nav

HTML

<div id="area", width="1000px" height="1000px"></div>

JavaScript

var GAP = 10, NODE_RADIUS = 14;

  var nodes = [
	{id: 1, prop: [{id: 1, something: 1}]},
    {id: 2, prop: [{id: 1, something: 1}, {id: 2, something: 1}, {id: 3, something: 1}]},
    {id: 3, prop: [{id: 1, something: 1}, {id: 2, something: 1}]},
    {id: 4, prop: [{id: 1, something: 1}]},
    {id: 5, prop: [{id: 1, something: 1}]},
    {id: 6, prop: []}
  ];

var nodeLayer = d3.select("#area").selectAll(".node").data(nodes, function(d) {return d.id; });
var iNodes = nodeLayer.enter().append("svg").attr("class", "node");
	//append the black circle
	iNodes.append("circle")
				.style("fill", "black")
				.attr("r", NODE_RADIUS)
				.attr("cx", function(d) {return 10 + d.id * 10;})
				.attr("cy", 100);
	//append the grey rounded rectangle
	iNodes.append("svg:path")
				.attr("d", function(d,i) {if (d.prop.length) return roundedRect((i + 1) * 10, 100, 50, 10, 3);})
				.attr("class", "portholder")
				.attr("fill","#eee")
				.attr("stroke","#000")
				.attr("stroke-width","0.2px")
				//########################### THIS IS WHERE I NEED HELP ###########################
			.append("svg")
				.selectAll(".prop").data(function(d) {return d.prop;}).enter()
				.append("svg:rect")
				.append("class","prop")
				.attr("width", function(d) {console.log("propID="+d.id);return 10;})
                .attr("height", 10)
                .attr("fill", '#FFF')
                .attr("stroke", '#555')
				.attr("stroke-width", "2px")
			.append("text")
				.text(function(d){ console.log("parentID="+this.parentNode.id);return this.parentNode.id;});

// Returns path data for a rectangle with rounded corners. The top-left corner is x,y
function roundedRect(x, y, width, height, radius) 
{
  return "M" + x + "," + y
       + "h" + (width - radius)
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
       + "v" + (height - 2 * radius)
       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
       + "h" + (radius - width)
	   + "a" + radius + "," +...