JSFiddle - React, Tailwind, and code Playground

by alepkowski

HTML

<svg class="chart" width="420" height="220">
 
 </svg>

JavaScript

var data = [{
table: 'User',
columns: [{pk: false,
name:'aaaaaaaaaaaaaa', type:'int'},{pk: false,
name:'wwwwwwwww', type:'int'},{pk: false,
name:'zzzzzzzzzzzzzz', type:'int'}]
}
/*,
{
table: 'UserDoper',
columns: [{pk: false,
name:'wre', type:'int'}]
}*/
];

var heightElement = 20;
var margin = 15;    
var chart = d3.select(".chart")
    .attr("width", 420)
    .attr("height", 300);

var table = chart.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(50," + (i+1) * 100 + ")"; });

table.append("rect")
    .attr("width", 150)
    .attr("height", function(d) {return (d.columns.length+1) * heightElement})
   .style("stroke","#009900")
    .style("stroke-width","2")
    .style("fill","none");


table.append("text")
.attr('y',0)
.attr('x',0)
.attr("dy", ".99em")
.text(function(d){return d.table;});

table.append('line')
.attr('x1',0)
.attr('y1',heightElement)
.attr('x2',150)
.attr('y2',heightElement)
.attr("style","stroke:rgb(255,0,0);stroke-width:1");

var columns = table.selectAll('qw')
.data(function(d){ alert(d.columns); return d.columns;})
.enter().append('text')

columns.attr("dy", ".99em")
.attr('y',function(d,i){ return (heightElement*i) + heightElement})
.attr('x',function(d,i){ return 0; })
.text(function(d){ alert(d.name); return d.name;});

/*<g transform="translate(0,0)">
    <rect width="100" height="100" 
      style="stroke:#009900;stroke-width:2;fill:none;"
    ></rect>
    <text x="40" y="10"
    style="fill: #000000"
    dy=".35em">User</text>
    <line x1="0"  y1="20" x2="100"   y2="20" style="stroke:#006600;"/>
    
  </g>*/