Old school D3 from simpler times

All examples By author By category About

cool-Blue

Full window Github gist

d3 fdg with font BBox positioning and sizing of nodes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    svg {
      outline: 1px solid #282f51;
      pointer-events: all;
      overflow: visible;
    }

g.outline {
      outline: 1px solid red;
    }

#panel div {
      display: inline-block;
      margin: 0 .25em 3px 0;
    }

#panel div div {
      white-space: pre;
      margin: 0 .25em 3px 0;
    }

div#inputDiv {
      white-space: normal;
      display: inline-block;
    }

.node {
      cursor: default;
    }

.content {
      transform-origin: 50% 50%;
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div id="panel">
  <div id="inputDiv">
    <input id="update" type="button" value="update">
  </div>
  <div id="wrapAlpha">alpha:<div id="alpha"></div></div><div id="fdg"></div>
</div>
<div id="viz"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/elapsedtime/elapsedtime/elapsed%20time%201.0.js"></script>
<script src="script-array-base.js"></script>

</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    svg {
      outline: 1px solid #282f51;
      pointer-events: all;
      overflow: visible;
    }
​
    g.outline {
      outline: 1px solid red;
    }
​
    #panel div {
      display: inline-block;
      margin: 0 .25em 3px 0;
    }
​
    #panel div div {
      white-space: pre;
      margin: 0 .25em 3px 0;
    }
​
    div#inputDiv {
      white-space: normal;
      display: inline-block;
    }
​
    .node {
      cursor: default;
    }
​
    .content {
      transform-origin: 50% 50%;
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div id="panel">
  <div id="inputDiv">
    <input id="update" type="button" value="update">
  </div>
  <div id="wrapAlpha">alpha:<div id="alpha"></div></div><div id="fdg"></div>
</div>
<div id="viz"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/elapsedtime/elapsedtime/elapsed%20time%201.0.js"></script>
<script src="script-array-base.js"></script>
​
</body>
</html>
    

Updated missing url https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/elapsedTime/elapsedTime/elapsed%20time%201.0.js to https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/elapsedtime/elapsedtime/elapsed%20time%201.0.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/elapsedTime/elapsedTime/elapsed%20time%201.0.js