using D3-labeler to prevent text labels from overlapping in C3.js

195 views
Skip to first unread message

Dr MOT

unread,
Sep 14, 2015, 12:00:57 PM9/14/15
to c3js
Good day.

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

Reply all
Reply to author
Forward
0 new messages