Node is displayed at different postion in firefox and chrome?

GoJS
1

The same model json string, however some node display at diffrent position between web browsers firefox and chrome.

2

It’s hard to guess when we have no knowledge of what you have implemented. Two small screenshots would help, along with your node template and diagram layout, and an explanation of how they are different.

Most likely there is a difference in the fonts. What happens when you try IE/Edge/Safari/Android?

3

firefox.png1331×571 52 KB
chrome.png1206×567 55.4 KB

4

myDiagram.nodeTemplateMap.add(“flowchart”,
$$(go.Node, “Auto”,
{
locationSpot: new go.Spot(0, 0),
doubleClick: function (e, node) {
var part = node.part;
alert(‘to set svg’);
setPartOnEditing0(part);
partToDialog(“diaglogOfBindingSvg”);
openDialog0(“diaglogOfBindingSvg”);
}
},
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
$$(go.Panel, “Auto”,
$$(go.Picture,
{
name: “PICTURE2”,
source:"./assets/images/ly2b.svg"
,width: 100
,height: 100
},
new go.Binding(“source”, “figure”).makeTwoWay()
,new go.Binding(“width”,“width”).makeTwoWay()
,new go.Binding(“height”,“width”).makeTwoWay()
)
)));

myDiagram.nodeTemplateMap.add(“dataTag”,
$$(go.Node, “Auto”,{
locationObjectName: “BODY”,
locationSpot: go.Spot.Center,
locationSpot: new go.Spot(0.5, 0.5),
selectionObjectName: “BODY”,
resizable: true, resizeObjectName: “BODY”,
// contextMenu: nodeMenu,
doubleClick: function (e, node) {
alert(‘显示趋势图：’ + node.part.data.text);},
contextMenu: $$(go.Adornment, “Vertical”,$$(“ContextMenuButton”,
$$(go.TextBlock, “设置位号”),
{ click: function (e, obj) {

                    var part = obj.part.adornedPart;
                    setPartOnEditing0(part);
                    partToDialog("dialogOfTagFormulaRt");
                    openDialog0("dialogOfTagFormulaRt");
                  } })    
            )
            
            
        },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),{ 
            // this tooltip Adornment is shared by all nodes
            toolTip:
              $$(go.Adornment, "Auto",
                $$(go.Shape, { fill: "#FFFFCC" }),/*"#FFFFCC" */
                $$(go.TextBlock, { margin: 4 , background: "gray"},  // the tooltip shows the result of calling 
                  new go.Binding("text", "", function(d) { var str = d.info;return str;})
              ))
        },
        // the body
        $$(go.Panel,"Auto",{height:15,width:50,name:"BODY"},new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
                $$(go.Shape, "Rectangle",{ fill: "white", stroke: null, strokeWidth: 0 }),
                $$(go.TextBlock,{ margin: 1, textAlign: "right", font: "10px  Segoe UI,sans-serif", stroke: "black", editable: false
                },
                    new go.Binding("text", "text").makeTwoWay()))
        // end Auto Panel body
      )// end Node
    );
5

It does look like differences in the fonts. What happens in other browsers? Although it seems your template is missing a TextBlock.

Either you need to find a common font, or you need to use fixed-size TextBlocks or fixed-size Panels holding your text. I think the latter option would be preferable for you in the long run.

6

It is possible that there is some diffrences between different web browsers(i.e chrome and firefox) to display svg figure(especially the edges of figure elements are not fullfil to the whole canvas) . Is there any method to make the svg figure dispalyed identically?

7

If you have two different types of monitors, you’ll get two different renderings of the same page in the same browser on the same machine at the same time.

I really suggest that you make sure that TextBlocks do not affect the size of your Panels.