Extra lines around the nodes during printing for Tree diagram

GoJS
#1

Hi,
I have created a diagram using a treemapper sample. Now, I want to print this diagram. For printing, I have used the following code:-

var pageClone = $(’.rating_report’).clone();
var pageHtml = pageClone.html();
var svg = myDiagram.makeImage({scale : 2});

pageHtml = ('.panel_heading_strategy_title').html()+(’#header_comment_data_content’).html()+svg.outerHTML+$(’#footer_comment_data_content’).html();

Then I am using this pageHtml to create its PDF for printing. I am getting the following result which showing the extra lines around the node. Please check the sreen:-

tree print.png1359×640 78.7 KB

My original page is

Pasted image1147×513 20.3 KB

So, can any one please suggest how I can achieve the desired result?

Also, how I can make the tree on the center of the page during printing? Currently this is left aligned.

Thank you.

#2

I suggest that you take the svg.outerHTML and look at it stand-alone by copying it into a separate web page just to make sure the image looks right.

If it does look right, then you know that the problem involves the conversion to PDF.

But if it looks wrong, could you provide us more details for how to reproduce the problem, perhaps just on a trivial node?

By the way, Diagram.makeImage does not return SVG but an Image element.

#3

Hi Walter,

The issue of lines around the nodes has been sorted out. Actually, it was due to the background set for the Panel.

I have few concerns on the printing of a diagram while making image and converting into PDF. I have gone through the documentation of the printing.

I have calculated the width and height of the diagram by using actualBounds and set this size to make the image but it created the PDF like this (which is default FIT TO PAGE).

Pasted image1053×410 28 KB

You can see here it is left aligned and rest of the page on the right is completely blank. It should be in the mid. I have used the following code:-

var len = MINLENGTH;
var wdth = MINBREADTH;
myDiagram.findTopLevelGroups().each(function(lane) {
var holder = lane.placeholder;
if (holder !== null) {
var sz = holder.actualBounds;
len = Math.max(len, sz.height);
wdth = wdth + sz.width;
}
});
FinalPrintHeight = len + 100;
FinalPrintWidth = wdth + 400;
var svg = myDiagram.makeImage({size : new go.Size(FinalPrintWidth,FinalPrintHeight)});
pageHtml = ('.panel_heading_strategy_title').html()+(’#header_comment_data_content’).html()+svg.outerHTML+$(’#footer_comment_data_content’).html();

But, when I am not using the Size and use only the scale and I scale it to “2” means only this
var svg = myDiagram.makeImage({scale : 2});
Then it gives me the following PDF:-

Pasted image1067×567 75.6 KB

Here, the issues I got are

  1. It starts from page 2 if content if large but if content is small then it starts from page 1.
  2. Some text has been cut down from the right tree (you can check 5th and 6th line from right tree).

Can you please suggest how I can achieve the following:-

  1. It always starts from page 1.
  2. Complete text will appear.
  3. Always appears in the center of the page.
  4. How I can set the page size for the printing (standard size for Landscape & Portrait mode)?

Thank you for your support.

#4

I’m not sure what you want to do, but perhaps temporarily setting Diagram.fixedBounds would help put empty space on the left or top of the contents of the diagram.