d3.js labeler test
HTML
<script src="https://cdn.rawgit.com/mbostock/d3/master/d3.min.js"></script>
<!DOCTYPE html>
<svg class="chart"></svg>
<script src=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.js"></script>
<script>
(function () {
d3.labeler = function () {
var lab = [],
anc = [],
w = 1, // box width
h = 1, // box width
labeler = {};
var pixelMap = {};
var max_move = 5.0,
max_angle = 0.5,
acc = 0;
rej = 0;
// weights
var w_len = 0.2, // leader line length
w_inter = 1.0, // leader line intersection
w_lab2 = 30.0, // label-label overlap
w_lab_anc = 30.0; // label-anchor overlap
w_orient = 3.0; // orientation bias
// booleans for user defined functions
var user_energy = false,
user_schedule = false;
var user_defined_energy,
user_defined_schedule;
energy = function (index) {
// energy function, tailored for label placement
var m = lab.length,
ener = 0,
dx = lab[index].x - anc[index].x,
dy = anc[index].y - lab[index].y,
dist = Math.sqrt(dx * dx + dy * dy),
overlap = true,
amount = 0
theta = 0;
// penalty for length of leader line
//if (dist > 0) ener += dist * w_len;
// label orientation bias
dx /= dist;
dy /= dist;
if (dx > 0 && dy > 0) { ener += 0 * w_orient; }
else if (dx < 0 && dy > 0) { ener += 1 * w_orient; }
else if (dx < 0 && dy < 0) { ener += 2 * w_orient; }
else { ener += 3 * w_orient; }
var x21 = lab[index].x,
y21 = lab[index].y - lab[index].height + 2.0,
x22 = lab[index].x + lab[index].width,
y22 =...