Open ricardmestre opened 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:
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).
@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!!
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.
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!
Would be nice to have label justification. @cpettitt might you be checking in this support at some point?
Hi @cpettitt, I'm enjoying using Dagre and would like to see this feature merged in too!
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 ?
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:
Here is the graph definition:
I was looking for a solution and I tried to modify the text-anchor property of the label, but didn't worked:
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!