search

dagrejs / dagre-d3

A D3-based renderer for Dagre
MIT License
2.86k stars 592 forks source link

Is there any way to center multiline text labels into the node? #169

Open ricardmestre opened 9 years ago

ricardmestre commented 9 years ago

Hi everyone,

First of all, congratulations for this awesome library.

I am using the library graphlib-dot to read a dot graphic and render it with dagreD3. The rendering works perfect except one little issue. If I have multiple lines in a node's label, the library align them to left, but I need that the lines are aligned to the center of the node:

image

Here is the graph definition:

digraph axional_workflow{
A [label="This is a extra long line\nNow a break line\nAnd last one" shape="rect"];
B [label="Little line \nNow another a little longer\nAnd finally, the larger one. And all of them are aligned to the left"];
"A" -> "B";
}

I was looking for a solution and I tried to modify the text-anchor property of the label, but didn't worked:

d3.selectAll(".node .label")
    .attr("text-anchor", "middle");

image

I thought that I must modify the x attribute of every label but I am not and expert on JavaScript and the library is too complex for me.

Is there any way to center these lines?

Thank you!

cpettitt commented 9 years ago

Just last weekend I was playing with label justification. I have a WIP in the "label-justification" branch: https://github.com/cpettitt/dagre-d3/tree/label-justification. Some things that still need to be addressed:

  1. We don't ensure that the cluster is large enough for the label. This could be done by setting the top or bottom dummy node of the cluster to the width of the label + padding. This must be done in dagre.
  2. Similar problem for making vertical space for the label in the top o bottom position. This was not introduced with this change, but it could be fixed in dagre at the same time. Proposed solution: use the height + padding at the top or bottom dummy node as appropriate. This may cause some unrelated borders to have extra padding.
  3. Misc bugs when using labelJust on nodes. E.g. position gets moved to the opposite of justfication and the label is moved towards the bottom.
  4. Justification should have no impact on HTML labels.

3 and 4 are essential for your needs, while 1 and 2 could be fixed in a separate ticket (there is no regression, at least).

ricardmestre commented 9 years ago

@cpettitt, are you going to include this in the next version of the library? Meanwhile I will try to work with this approach.

Thank you!!

cpettitt commented 9 years ago

I've added some fixes for 3 and 4 above to https://github.com/cpettitt/dagre-d3/tree/label-justification. By default labels will be centered and you can justify to the left or the right with labelJust="l" or labelJust="r" respectively. Can you please give it a try and let me know how it goes? If all good, I'll merge this into master and release it.

ricardmestre commented 9 years ago

Hi @cpettitt, I was out for one month (sorry about that) but here I am again. I am not an expert of the repositories use, for this, excuse me if I am asking trivial questions. You ask me to test the branch label-justification, the compiled files in the dist/ directory are the updated to this branch changes? -In affirmative case, you said me that by default the labels would be centered, but this did not happen. Is there any config that I have to write? -In negative case, I have been trying to compile the code of this branch for myself, but I did not get it (as I said, I am far away for being an expert with the repositories). After solving some dependencies errors I obtain the following output:

NORTH2:dagre-d3-label-justification rms$ gulp dist
[13:20:28] Using gulpfile ~/development/lib/dagred3/dagre-d3-label-justification/gulpfile.js
[13:20:28] Starting 'version:build'...
[13:20:28] Finished 'version:build' after 19 ms
[13:20:28] Starting 'bower:build'...
[13:20:28] Finished 'bower:build' after 1.73 ms
[13:20:28] Starting 'demo:build'...
[13:20:28] Starting 'js:build'...
[13:20:28] Starting 'browserify dagre-d3.js'...
[13:20:28] Starting 'core-js:build'...
[13:20:28] Starting 'browserify dagre-d3.core.js'...
[13:20:28] Finished 'browserify dagre-d3.core.js' after 504 ms
[13:20:29] Finished 'core-js:build' after 1.57 s
[13:20:29] Starting 'core-js:test'...
INFO [karma]: Karma v0.12.36 server started at http://localhost:9877/
WARN [launcher]: Can not load "Chrome", it is not registered!
  Perhaps you are missing some plugin?
WARN [launcher]: Can not load "Safari", it is not registered!
  Perhaps you are missing some plugin?
WARN [launcher]: Can not load "Firefox", it is not registered!
  Perhaps you are missing some plugin?
WARN [launcher]: Can not load "PhantomJS", it is not registered!
  Perhaps you are missing some plugin?
[13:20:30] Finished 'demo:build' after 2.31 s
[13:20:30] Starting 'demo:test'...
[13:20:30] Finished 'browserify dagre-d3.js' after 2.51 s
/bin/sh: phantomjs: command not found
[13:20:30] 'demo:test' errored after 228 ms
[13:20:30] Error in plugin 'gulp-shell'
Message:
    Command `phantomjs /Users/rms/development/lib/dagred3/dagre-d3-label-justification/test/demo-test.js` failed with exit code 127
[13:20:32] Finished 'js:build' after 4.91 s
^C[13:37:12] Finished 'core-js:test' after 17 min

Phantomjs and gulp-shell are installed. I am using your karma.conf.js and gulpfile.js.

Do you know what I am doing wrong?

Sorry for the annoyances and thank you for the help!

dornstein commented 8 years ago

Would be nice to have label justification. @cpettitt might you be checking in this support at some point?

geoffwc commented 8 years ago

Hi @cpettitt, I'm enjoying using Dagre and would like to see this feature merged in too!

DhavalW commented 8 years ago

Hi @cpettitt ,

Cant thank you enough for this library & using it currently in my visual coding tool (still a WIP). A good alternate (undocumented ? ) way to style the labels I found, was to use -- { labelType:"html" } -- in the node options in g.setNode() . This allows for full HTML/CSS based styling to the label text.

The problem is that when redrawing the graph using the d3 renderer, the bounding shape for the node doesn't necessarily resize in proportion to the size of the html-styled label text at that zoom level. As a result, while at certain "sweet-spot" zoom levels, if you redraw the graph, the proportions and centering of the label with respect to the bounding shape are proper (and maintained till you redraw again)... for most other zoom levels, the text is either too small or spills out, looking either unreadable or ugly.

Can anything be done about this ?