I am using C3.js to create a scatter chart. C3.js doesn't have the feature of text labels above the points so I added the labels using d3.js
the problem is that some labels overlap
I found a a library to solve this problem:
(D3-labeler.js): https://github.com/tinker10/D3-Labeler
my try:
var label_array = [{x: 0.25, y: 3.4, name: "new FF", width: 10.0, height: 7.2},
{x: 0.3, y: 3.4, name: "new EE", width: 10.0, height: 7.2}];
var anchor_array = [{x: 0.25, y: 3.4, r:6}, {x: 0.3, y: 3.4, r:6}];
var width = $("#chart").width();
var height = 700;
var nsweeps = 1000;
d3.labeler()
.label(label_array)
.anchor(anchor_array)
.width(width)
.height(height)
.start(nsweeps);
but it didn't work with me !
Here's my try in jsFiddle:
http://jsfiddle.net/qnkgeer9/
what am I doing wrong?
Thanks in advance