change font size and space between 2 boxes

[otmezger]

hi again,

is there a way to define the space between 2 boxes? I need to narrow my diagram so it will fit in my report.

I would also like to increase the font size.... is there a way to do that on the js?
I could not find any "font size" setting....

Thanks!

[tamc]

To narrow the diagram, set the 'display_width' property of the sankey object:

sankey = new Sankey();
sankey.display_width = 500; // Make it 500 pixels wide

You may also have to adjust the box width property to make it look ok:

sankey.box_width = 30;

At the moment there isn't an easy way of setting the font size that works across browsers. Once again you need to hack the sankey.js code a bit to add some extra font attributes, as documented in the Raphael library here:

http://raphaeljs.com/reference.html#Element.attr

You are looking to add a 'font-size' attribute to the array, with the size in pixels.

The extra attributes need to go in the hashes at these lines:
https://github.com/tamc/Sankey/blob/master/js/sankey.js#L305
https://github.com/tamc/Sankey/blob/master/js/sankey.js#L308
https://github.com/tamc/Sankey/blob/master/js/sankey.js#L520
https://github.com/tamc/Sankey/blob/master/js/sankey.js#L525
https://github.com/tamc/Sankey/blob/master/js/sankey.js#L528

Hope that works.

Tom

[otmezger]

Hi Tom,

thanks for your help. I could change the width with success. I also manage to change the font size (font-size) of the input and output boxes and on the lines, but the name of the boxes remained small.. :-(

here is how it looks like: http://i.imgur.com/QWXLI.png

can you give me a last hand on this?
thanks

[tamc]

Ok.

For the text inside the box, can you check you added a font size attribute to this line:
https://github.com/tamc/Sankey/blob/master/js/sankey.js#L408

For the numbers above the boxes, add something like .attr({'font-size':10}) to the end of this lineL
https://github.com/tamc/Sankey/blob/master/js/sankey.js#L581

Does that work?

Tom

[otmezger]

I tried to convert like 581 into this:

  this.label = r.text(this.labelPositionX(), this.labelPositionY(), this.descriptionLabelText()).attr({this.labelAttributes(),'text-size':myFontSize});

but it didn't work.

i was also uable to add the attribute to l408... can you send an example on how this can be done?

[tamc]

Ok. Just in case it works for you, there is an alternative approach that is simpler but only works on some browsers (definitely not older versions of IE). This just requires you to add some css to your webpage: 3686e24

On the x-browser approach we have been working on, you wrote:

this.label = r.text(this.labelPositionX(), this.labelPositionY(), this.descriptionLabelText()).attr({this.labelAttributes(),'text-size':myFontSize});

But unfortunately javascript can't merge hashes like that. Doing this should work:

this.label = r.text(this.labelPositionX(), this.labelPositionY(), this.descriptionLabelText()).attr({'text-size':myFontSize});

And for line 408, not sure what I was thinking. Sorry. I think I meant to say line 528:
https://github.com/tamc/Sankey/blob/master/js/sankey.js#L528

Which should be changed to something like:

return {'text-size':myFontSize};

Hope that helps.

Tom

[tomravalde]

Hi Tom,

Thanks for this tool ‒ it's been very helpful!

I do however have a similar problem to otmezger. I'm trying to add 'font-size' attributes to the relevant lines (305, 308, 520, 525, 528) as suggested in your comment from 3 Dec 2012, without much success. I'm wondering if the relevant line numbers have changed following alterations to the code since Dec 2012? Or perhaps I'm just making a mistake, in which case, please could you provide an example of what a line should look like?

Many thanks,
Tom

[tamc]

Hi Tom

The lines probably changed.

For the lines:
Label at the start: https://github.com/tamc/Sankey/blob/master/js/sankey.js#L354
Label at the end: https://github.com/tamc/Sankey/blob/master/js/sankey.js#L357

For the boxes:
Labels to the left of left most boxes: https://github.com/tamc/Sankey/blob/master/js/sankey.js#L590
Labels to the right of the right most boxes: https://github.com/tamc/Sankey/blob/master/js/sankey.js#L590
Labels in the middle of the middle boxes: https://github.com/tamc/Sankey/blob/master/js/sankey.js#L598

Numbers on the top of the boxes: https://github.com/tamc/Sankey/blob/master/js/sankey.js#L658

Sorry this is a bit of an effort to do. This code has not had a lot of love recently. Hopefully I'll get a moment to update it sometime soon.

[tomravalde]

That works perfectly. Thanks Tom!