dagre-d3 icon indicating copy to clipboard operation
dagre-d3 copied to clipboard

Added custom css class on edge labels

Open kaelhem opened this issue 4 years ago • 5 comments

Hi, I've just made a small update on edge label to be able to specify custom css classes.


This PR allow to add a labelClass parameter on the setEdge function.

// sample :
g.setEdge(link.source, link.target, {
  labelClass: 'cutomClass1 customClass2'
})

The original label class is untouched.

It should fix https://github.com/dagrejs/dagre-d3/issues/195

kaelhem avatar Mar 27 '20 15:03 kaelhem

For consistency (with labelStyle and labelType) you probably should name the label class property labelClass instead of className.

(And I have no idea why you had to redo the way the class is applied - didn't classed work with the calculated class list?)

tik-stbuehler avatar May 18 '20 08:05 tik-stbuehler

Hello. I changed the property name for labelClass as you asked. I replaced the "classed" stuff that allow to add/remove a specific class name to be able to specify several classes in the className parameter (like this : customClass1 customClass2).

If you think there is a better way to do it, tell me I will update the PR.

kaelhem avatar May 18 '20 11:05 kaelhem

I'm not a maintainer, just a user (and I'm interested in the feature too) :)

According to the API doc classed should work with multiple classes (like "label customClass1 customClass2" - i.e. just pass labelClass instead of "label") - but I'm no d3 expert, so perhaps I'm missing something here.

tik-stbuehler avatar May 18 '20 12:05 tik-stbuehler

ok :) I will have look, not a d3 expert too :)

edit: @tik-stbuehler You were right, I've update the PR.

kaelhem avatar May 18 '20 12:05 kaelhem

I ported the project to es6 and I accept contributions! https://github.com/tbo47/dagre-es

tbo47 avatar Jan 06 '22 16:01 tbo47