label in circle

by fguillem

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width ="400" height="300" style="background-color:#aaa">
  <g id="container" transform="translate(200,150)">
    <circle cx="0" cy="0" r = "100" fill="none" stroke="black"></circle>
    <line x1="-100" y1="0" x2="100" y2="0" stroke="black"></line>
    <line y1="-100" x1="0" y2="100" x2="0" stroke="black"></line>
    <text id="text" dy="0.35em" text-anchor = "middle"></text>
  </g>
</svg>

JavaScript

// selection.node().getBBox()
var radius = 100

function getMaxScale(bbox, radius) {
  var ratio = bbox.height / bbox.width;
  var maxHeight = radius * 2 * Math.cos(Math.PI/2 - Math.atan(ratio));
  return maxHeight / bbox.height;
}

var container = d3.select("#container");

function setText(text) {
  container.selectAll("text")
    .attr("opacity", 0)
    .remove()
  
  var txt = container.append("text")
    .text(text)
    .attr("text-anchor", "middle")
    .attr("dy", "0.35em");
    
    txt.attr("transform", "scale(" + getMaxScale(txt.node().getBBox(), radius) + ")");
}

var counter = 0;

//setInterval(function() {setText(counter++)}, 1);