dagrejs / dagre-d3

A D3-based renderer for Dagre

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Parent and child position Issue

ThummalaJanardhanReddy opened this issue · comments

while trying to draw Parent and child nodes, some of the child nodes are not placing inside the Parent node. Please check the attached screenshot and sample html code to reproduce the issue.

<style> .clusters rect { fill: #00ffd0; stroke: #999; stroke-width: 1.5px; } text { font-weight: 300; font-family: "Helvetica Neue", Helvetica, Arial, sans-serf; font-size: 14px; } .node rect { stroke: #999; fill: #fff; stroke-width: 1.5px; } .edgePath path { stroke: #333; stroke-width: 1.5px; } </style>

<title></title> <script src="node_modules/lodash/lodash.js"></script> <script src="node_modules/graphlib/dist/graphlib.core.js"></script> <script src="https://d3js.org/d3.v5.js"></script> <script src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.js"></script> <script type="text/javascript">
var g = new dagreD3.graphlib.Graph({ compound: true })
    .setGraph({})
    .setDefaultEdgeLabel(function () { return {}; });

// Here we're setting the nodes
//#region 
g.setNode('data', { label: 'Data' });
g.setNode('conv0', { label: 'Convolution' });
g.setNode('conv1_dw', { label: 'Conv1_dw' });
g.setNode('conv1', { label: 'Conv1' });
g.setNode('conv2_dw', { label: 'Conv2_dw' });
g.setNode('conv2', { label: 'Conv2' });
g.setNode('conv3_dw', { label: 'Conv3_dw' });

g.setNode('conv3', { label: 'Conv3' });
g.setNode('conv4_dw', { label: 'Conv4_dw' });
g.setNode('conv4', { label: 'Conv4' });
g.setNode('conv5_dw', { label: 'Conv5_dw' });
g.setNode('conv5', { label: 'Conv5' });
g.setNode('conv6_dw', { label: 'Conv6_dw' });
g.setNode('conv6', { label: 'Conv6' });

g.setNode('conv7_dw', { label: 'Conv7_dw' });
g.setNode('conv7', { label: 'Conv7' });
g.setNode('conv8_dw', { label: 'Conv8_dw' });
g.setNode('conv8', { label: 'Conv8' });
g.setNode('conv9_dw', { label: 'Conv9_dw' });
g.setNode('conv9', { label: 'Conv9' });
g.setNode('conv10_dw', { label: 'Conv10_dw' });

g.setNode('conv10', { label: 'Conv10' });
g.setNode('conv11_dw', { label: 'Conv11_dw' });
g.setNode('conv11', { label: 'Conv11' });
g.setNode('conv12_dw', { label: 'Conv12_dw' });
g.setNode('conv12', { label: 'Conv12' });
g.setNode('conv13_dw', { label: 'Conv13_dw' });
g.setNode('conv13', { label: 'Conv13' });

g.setNode('conv14_1', { label: 'Conv14_1' });
g.setNode('conv14_2', { label: 'Conv14_2' });
g.setNode('conv15_1', { label: 'Conv15_1' });
g.setNode('conv15_2', { label: 'Conv15_2' });
g.setNode('conv16_1', { label: 'Conv16_1' });
g.setNode('conv16_2', { label: 'Conv16_2' });
g.setNode('conv17_1', { label: 'Conv17_1' });

g.setNode('conv17_2', { label: 'Conv17_2' });
g.setNode('conv17_2_mbox_loc', { label: 'conv17_2_mbox_loc' });
g.setNode('conv17_2_mbox_loc_perm', { label: 'conv17_2_mbox_loc_perm' });
g.setNode('conv17_2_mbox_loc_flat', { label: 'conv17_2_mbox_loc_flat' });
g.setNode('conv17_2_mbox_conf', { label: 'conv17_2_mbox_conf' });
g.setNode('conv17_2_mbox_conf_perm', { label: 'conv17_2_mbox_conf_perm' });
g.setNode('conv17_2_mbox_conf_flat', { label: 'conv17_2_mbox_conf_flat' });

g.setNode('conv17_2_mbox_priorbox', { label: 'conv17_2_mbox_priorbox' });
g.setNode('conv16_2_mbox_loc', { label: 'conv16_2_mbox_loc' });
g.setNode('conv16_2_mbox_loc_perm', { label: 'conv16_2_mbox_loc_perm' });
g.setNode('conv16_2_mbox_loc_flat', { label: 'conv16_2_mbox_loc_flat' });
g.setNode('conv16_2_mbox_conf', { label: 'conv16_2_mbox_conf' });
g.setNode('conv16_2_mbox_conf_perm', { label: 'conv16_2_mbox_conf_perm' });
g.setNode('conv16_2_mbox_conf_flat', { label: 'conv16_2_mbox_conf_flat' });

g.setNode('conv16_2_mbox_priorbox', { label: 'conv16_2_mbox_priorbox' });
g.setNode('conv15_2_mbox_loc', { label: 'conv15_2_mbox_loc' });
g.setNode('conv15_2_mbox_loc_perm', { label: 'conv15_2_mbox_loc_perm' });
g.setNode('conv15_2_mbox_loc_flat', { label: 'conv15_2_mbox_loc_flat' });
g.setNode('conv15_2_mbox_conf', { label: 'conv15_2_mbox_conf' });
g.setNode('conv15_2_mbox_conf_perm', { label: 'conv15_2_mbox_conf_perm' });
g.setNode('conv15_2_mbox_conf_flat', { label: 'conv15_2_mbox_conf_flat' });

g.setNode('conv15_2_mbox_priorbox', { label: 'conv15_2_mbox_priorbox' });
g.setNode('conv14_2_mbox_loc', { label: 'conv14_2_mbox_loc' });
g.setNode('conv14_2_mbox_loc_perm', { label: 'conv14_2_mbox_loc_perm' });
g.setNode('conv14_2_mbox_loc_flat', { label: 'conv14_2_mbox_loc_flat' });
g.setNode('conv14_2_mbox_conf', { label: 'conv14_2_mbox_conf' });
g.setNode('conv14_2_mbox_conf_perm', { label: 'conv14_2_mbox_conf_perm' });
g.setNode('conv14_2_mbox_conf_flat', { label: 'conv14_2_mbox_conf_flat' });

g.setNode('conv14_2_mbox_priorbox', { label: 'conv14_2_mbox_priorbox' });
g.setNode('conv13_mbox_loc', { label: 'conv13_mbox_loc' });
g.setNode('conv13_mbox_loc_perm', { label: 'conv13_mbox_loc_perm' });
g.setNode('conv13_mbox_loc_flat', { label: 'conv13_mbox_loc_flat' });
g.setNode('conv13_mbox_conf', { label: 'conv13_mbox_conf' });
g.setNode('conv13_mbox_conf_perm', { label: 'conv13_mbox_conf_perm' });
g.setNode('conv13_mbox_conf_flat', { label: 'conv13_mbox_conf_flat' });

g.setNode('conv13_mbox_priorbox', { label: 'conv13_mbox_priorbox' });
g.setNode('conv11_mbox_loc', { label: 'conv11_mbox_loc' });
g.setNode('conv11_mbox_loc_perm', { label: 'conv11_mbox_loc_perm' });
g.setNode('conv11_mbox_loc_flat', { label: 'conv11_mbox_loc_flat' });
g.setNode('mbox_loc', { label: 'mbox_loc' });
g.setNode('conv11_mbox_conf', { label: 'conv11_mbox_conf' });
g.setNode('conv11_mbox_conf_perm', { label: 'conv11_mbox_conf_perm' });

g.setNode('conv11_mbox_conf_flat', { label: 'conv11_mbox_conf_flat' });
g.setNode('mbox_conf', { label: 'mbox_conf' });
g.setNode('conv11_mbox_priorbox', { label: 'conv11_mbox_priorbox' });
g.setNode('mbox_priorbox', { label: 'mbox_priorbox' });
g.setNode('mbox_conf_reshape', { label: 'mbox_conf_reshape' });
g.setNode('mbox_conf_softmax', { label: 'mbox_conf_softmax' });
g.setNode('detection_out', { label: 'detection_out' });
//#endregion

//#region   Parent Nodes
g.setNode('SubGraph_Cluster_Id0', { label: 'SubGraph_Cluster_Id0', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_0_0_xm6', { label: 'SubGraph_Id0_0_0_xm6', clusterLabelPos: 'top', style: 'fill: #ffd47f' });
g.setNode('SubGraph_Id0_0_1_xm6', { label: 'SubGraph_Id0_0_1_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_0_2_xm6', { label: 'SubGraph_Id0_0_2_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_0_3_xm6', { label: 'SubGraph_Id0_0_3_xm6', clusterLabelPos: 'top', style: 'fill: #ffd47f' });
g.setNode('SubGraph_Id0_0_4_xm6', { label: 'SubGraph_Id0_0_4_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_0_5_xm6', { label: 'SubGraph_Id0_0_5_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_0_6_xm6', { label: 'SubGraph_Id0_0_6_xm6', clusterLabelPos: 'top', style: 'fill: #ffd47f' });
g.setNode('SubGraph_Id0_0_7_xm6', { label: 'SubGraph_Id0_0_7_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_0_8_xm6', { label: 'SubGraph_Id0_0_8_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_0_9_xm6', { label: 'SubGraph_Id0_0_9_xm6', clusterLabelPos: 'top', style: 'fill: #ffd47f' });
g.setNode('SubGraph_Id0_0_10_xm6', { label: 'SubGraph_Id0_0_10_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_0_11_xm6', { label: 'SubGraph_Id0_0_11_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_0_12_xm6', { label: 'SubGraph_Id0_0_12_xm6', clusterLabelPos: 'top', style: 'fill: #ffd47f' });
g.setNode('SubGraph_Id0_0_13_xm6', { label: 'SubGraph_Id0_0_13_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_0_14_xm6', { label: 'SubGraph_Id0_0_14_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_0_15_xm6', { label: 'SubGraph_Id0_0_15_xm6', clusterLabelPos: 'top', style: 'fill: #ffd47f' });
g.setNode('SubGraph_Id0_0_16_xm6', { label: 'SubGraph_Id0_0_16_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_0_17_xm6', { label: 'SubGraph_Id0_0_17_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_0_18_xm6', { label: 'SubGraph_Id0_0_18_xm6', clusterLabelPos: 'top', style: 'fill: #ffd47f' });
g.setNode('SubGraph_Id0_0_19_xm6', { label: 'SubGraph_Id0_0_19_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_0_20_xm6', { label: 'SubGraph_Id0_0_20_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Cluster_Id1', { label: 'SubGraph_Cluster_Id1', clusterLabelPos: 'top', style: 'fill: #ffd47f' });
g.setNode('SubGraph_Id0_1_21_xm6', { label: 'SubGraph_Id0_1_21_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Cluster_Id2', { label: 'SubGraph_Cluster_Id2', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_2_22_xm6', { label: 'SubGraph_Id0_2_22_xm6', clusterLabelPos: 'top', style: 'fill: #ffd47f' });
g.setNode('SubGraph_Cluster_Id3', { label: 'SubGraph_Cluster_Id3', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('SubGraph_Id0_3_23_xm6', { label: 'SubGraph_Id0_3_23_xm6', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
//#endregion

//#region set grand Parent Nodes
g.setParent('SubGraph_Id0_0_0_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_1_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_2_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_3_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_4_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_5_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_6_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_7_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_8_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_9_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_10_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_11_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_12_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_13_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_14_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_15_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_16_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_17_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_18_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_19_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_0_20_xm6', 'SubGraph_Cluster_Id0');
g.setParent('SubGraph_Id0_1_21_xm6', 'SubGraph_Cluster_Id1');
g.setParent('SubGraph_Id0_2_22_xm6', 'SubGraph_Cluster_Id2');
g.setParent('SubGraph_Id0_3_23_xm6', 'SubGraph_Cluster_Id3');
//#endregion

//#region set Parent Nodes
g.setParent('data', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv0', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv1_dw', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv1', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv2_dw', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv2', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv3_dw', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv3', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv4_dw', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv4', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv5_dw', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv5', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv6_dw', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv6', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv7_dw', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv7', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv8_dw', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv8', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv9_dw', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv9', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv10_dw', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv10', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv11_dw', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv11', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv12_dw', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv12', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv13_dw', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv13', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv14_1', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv14_2', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv15_1', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv15_2', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv16_1', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv16_2', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv17_1', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv17_2', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv17_2_mbox_loc', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv17_2_mbox_loc_perm', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv17_2_mbox_loc_flat', 'SubGraph_Id0_0_0_xm6');
g.setParent('conv17_2_mbox_conf', 'SubGraph_Id0_0_1_xm6');
g.setParent('conv17_2_mbox_conf_perm', 'SubGraph_Id0_0_1_xm6');
g.setParent('conv17_2_mbox_conf_flat', 'SubGraph_Id0_0_1_xm6');
g.setParent('conv17_2_mbox_priorbox', 'SubGraph_Id0_0_2_xm6');
g.setParent('conv16_2_mbox_loc', 'SubGraph_Id0_0_3_xm6');
g.setParent('conv16_2_mbox_loc_perm', 'SubGraph_Id0_0_3_xm6');
g.setParent('conv16_2_mbox_loc_flat', 'SubGraph_Id0_0_3_xm6');
g.setParent('conv16_2_mbox_conf', 'SubGraph_Id0_0_4_xm6');
g.setParent('conv16_2_mbox_conf_perm', 'SubGraph_Id0_0_4_xm6');
g.setParent('conv16_2_mbox_conf_flat', 'SubGraph_Id0_0_4_xm6');
g.setParent('conv16_2_mbox_priorbox', 'SubGraph_Id0_0_5_xm6');
g.setParent('conv15_2_mbox_loc', 'SubGraph_Id0_0_6_xm6');
g.setParent('conv15_2_mbox_loc_perm', 'SubGraph_Id0_0_6_xm6');
g.setParent('conv15_2_mbox_loc_flat', 'SubGraph_Id0_0_6_xm6');
g.setParent('conv15_2_mbox_conf', 'SubGraph_Id0_0_7_xm6');
g.setParent('conv15_2_mbox_conf_perm', 'SubGraph_Id0_0_7_xm6');
g.setParent('conv15_2_mbox_conf_flat', 'SubGraph_Id0_0_7_xm6');
g.setParent('conv15_2_mbox_priorbox', 'SubGraph_Id0_0_8_xm6');
g.setParent('conv14_2_mbox_loc', 'SubGraph_Id0_0_9_xm6');
g.setParent('conv14_2_mbox_loc_perm', 'SubGraph_Id0_0_9_xm6');
g.setParent('conv14_2_mbox_loc_flat', 'SubGraph_Id0_0_9_xm6');
g.setParent('conv14_2_mbox_conf', 'SubGraph_Id0_0_10_xm6');
g.setParent('conv14_2_mbox_conf_perm', 'SubGraph_Id0_0_10_xm6');
g.setParent('conv14_2_mbox_conf_flat', 'SubGraph_Id0_0_10_xm6');
g.setParent('conv14_2_mbox_priorbox', 'SubGraph_Id0_0_11_xm6');
g.setParent('conv13_mbox_loc', 'SubGraph_Id0_0_12_xm6');
g.setParent('conv13_mbox_loc_perm', 'SubGraph_Id0_0_12_xm6');
g.setParent('conv13_mbox_loc_flat', 'SubGraph_Id0_0_12_xm6');
g.setParent('conv13_mbox_conf', 'SubGraph_Id0_0_13_xm6');

g.setParent('conv13_mbox_conf_perm', 'SubGraph_Id0_0_13_xm6');
g.setParent('conv13_mbox_conf_flat', 'SubGraph_Id0_0_13_xm6');
g.setParent('conv13_mbox_priorbox', 'SubGraph_Id0_0_14_xm6');
g.setParent('conv11_mbox_loc', 'SubGraph_Id0_0_15_xm6');
g.setParent('conv11_mbox_loc_perm', 'SubGraph_Id0_0_15_xm6');
g.setParent('conv11_mbox_loc_flat', 'SubGraph_Id0_0_15_xm6');
g.setParent('mbox_loc', 'SubGraph_Id0_0_16_xm6');
g.setParent('conv11_mbox_conf', 'SubGraph_Id0_0_17_xm6');
g.setParent('conv11_mbox_conf_perm', 'SubGraph_Id0_0_17_xm6');
g.setParent('conv11_mbox_conf_flat', 'SubGraph_Id0_0_17_xm6');
g.setParent('mbox_conf', 'SubGraph_Id0_0_18_xm6');
g.setParent('conv11_mbox_priorbox', 'SubGraph_Id0_0_19_xm6');
g.setParent('mbox_priorbox', 'SubGraph_Id0_0_20_xm6');
g.setParent('mbox_conf_reshape', 'SubGraph_Id0_1_21_xm6');
g.setParent('mbox_conf_softmax', 'SubGraph_Id0_2_22_xm6');
g.setParent('detection_out', 'SubGraph_Id0_3_23_xm6');

//#endregion

//#region node relation
g.setEdge('data','conv0');
g.setEdge('conv0', 'conv1_dw');
g.setEdge('conv1_dw', 'conv1');
g.setEdge('conv1', 'conv2_dw');
g.setEdge('conv2_dw', 'conv2');
g.setEdge('conv2',  'conv3_dw');
g.setEdge('conv3_dw', 'conv3');

g.setEdge('conv3', 'conv4_dw');
g.setEdge('conv4_dw', 'conv4');
g.setEdge('conv4', 'conv5_dw');
g.setEdge('conv5_dw', 'conv5');
g.setEdge('conv5', 'conv6_dw');
g.setEdge('conv6_dw', 'conv6');
g.setEdge('conv6', 'conv7_dw');

g.setEdge('conv7_dw', 'conv7');
g.setEdge('conv7', 'conv8_dw');
g.setEdge('conv8_dw', 'conv8');
g.setEdge('conv8', 'conv9_dw');
g.setEdge('conv9_dw', 'conv9');
g.setEdge('conv9', 'conv10_dw');
g.setEdge('conv10_dw', 'conv10');

g.setEdge('conv10', 'conv11_dw');
g.setEdge('conv11_dw', 'conv11');
g.setEdge('conv11', 'conv12_dw');
g.setEdge('conv11', 'conv11_mbox_loc');
g.setEdge('conv11', 'conv11_mbox_conf');
g.setEdge('conv11', 'conv11_mbox_priorbox');
g.setEdge('conv12_dw', 'conv12');
g.setEdge('conv12', 'conv13_dw');
g.setEdge('conv13_dw', 'conv13');
g.setEdge('conv13', 'conv14_1');
g.setEdge('conv13', 'conv13_mbox_loc');
g.setEdge('conv13', 'conv13_mbox_conf');
g.setEdge('conv13', 'conv13_mbox_priorbox');

g.setEdge('conv14_1', 'conv14_2');
g.setEdge('conv14_2', 'conv15_1');
g.setEdge('conv14_2', 'conv14_2_mbox_loc');
g.setEdge('conv14_2', 'conv14_2_mbox_conf');
g.setEdge('conv14_2', 'conv14_2_mbox_priorbox');
g.setEdge('conv15_1', 'conv15_2');
g.setEdge('conv15_2', 'conv16_1');
g.setEdge('conv15_2', 'conv15_2_mbox_loc');
g.setEdge('conv15_2', 'conv15_2_mbox_conf');
g.setEdge('conv15_2', 'conv15_2_mbox_priorbox');
g.setEdge('conv16_1', 'conv16_2');
g.setEdge('conv16_2', 'conv17_1');
g.setEdge('conv16_2', 'conv16_2_mbox_loc');
g.setEdge('conv16_2', 'conv16_2_mbox_conf');
g.setEdge('conv16_2', 'conv16_2_mbox_priorbox');
g.setEdge('conv17_1', 'conv17_2');

g.setEdge('conv17_2', 'conv17_2_mbox_loc');
g.setEdge('conv17_2', 'conv17_2_mbox_conf');
g.setEdge('conv17_2', 'conv17_2_mbox_priorbox');
g.setEdge('conv17_2_mbox_loc', 'conv17_2_mbox_loc_perm');
g.setEdge('conv17_2_mbox_loc_perm', 'conv17_2_mbox_loc_flat');
g.setEdge('conv17_2_mbox_loc_flat', 'mbox_loc');
g.setEdge('conv17_2_mbox_conf', 'conv17_2_mbox_conf_perm');
g.setEdge('conv17_2_mbox_conf_perm', 'conv17_2_mbox_conf_flat');
g.setEdge('conv17_2_mbox_conf_flat', 'mbox_conf');

g.setEdge('conv17_2_mbox_priorbox', 'mbox_priorbox');
g.setEdge('conv16_2_mbox_loc', 'conv16_2_mbox_loc_perm');
g.setEdge('conv16_2_mbox_loc_perm', 'conv16_2_mbox_loc_flat');
g.setEdge('conv16_2_mbox_loc_flat', 'mbox_loc');
g.setEdge('conv16_2_mbox_conf', 'conv16_2_mbox_conf_perm');
g.setEdge('conv16_2_mbox_conf_perm', 'conv16_2_mbox_conf_flat');
g.setEdge('conv16_2_mbox_conf_flat', 'mbox_conf');

g.setEdge('conv16_2_mbox_priorbox', 'mbox_priorbox');
g.setEdge('conv15_2_mbox_loc', 'conv15_2_mbox_loc_perm');
g.setEdge('conv15_2_mbox_loc_perm', 'conv15_2_mbox_loc_flat');
g.setEdge('conv15_2_mbox_loc_flat', 'mbox_loc');
g.setEdge('conv15_2_mbox_conf', 'conv15_2_mbox_conf_perm');
g.setEdge('conv15_2_mbox_conf_perm', 'conv15_2_mbox_conf_flat');
g.setEdge('conv15_2_mbox_conf_flat', 'mbox_conf');

g.setEdge('conv15_2_mbox_priorbox', 'mbox_priorbox');
g.setEdge('conv14_2_mbox_loc', 'conv14_2_mbox_loc_perm');
g.setEdge('conv14_2_mbox_loc_perm', 'conv14_2_mbox_loc_flat');
g.setEdge('conv14_2_mbox_loc_flat', 'mbox_loc');
g.setEdge('conv14_2_mbox_conf', 'conv14_2_mbox_conf_perm');
g.setEdge('conv14_2_mbox_conf_perm', 'conv14_2_mbox_conf_flat');
g.setEdge('conv14_2_mbox_conf_flat', 'mbox_conf');

g.setEdge('conv14_2_mbox_priorbox', 'mbox_priorbox');
g.setEdge('conv13_mbox_loc', 'conv13_mbox_loc_perm');
g.setEdge('conv13_mbox_loc_perm', 'conv13_mbox_loc_flat');
g.setEdge('conv13_mbox_loc_flat', 'mbox_loc');
g.setEdge('conv13_mbox_conf', 'conv13_mbox_conf_perm');
g.setEdge('conv13_mbox_conf_perm', 'conv13_mbox_conf_flat');
g.setEdge('conv13_mbox_conf_flat', 'mbox_conf');

g.setEdge('conv13_mbox_priorbox', 'mbox_priorbox');
g.setEdge('conv11_mbox_loc', 'conv11_mbox_loc_perm');
g.setEdge('conv11_mbox_loc_perm', 'conv11_mbox_loc_flat');
g.setEdge('conv11_mbox_loc_flat', 'mbox_loc');
g.setEdge('mbox_loc', 'detection_out');
g.setEdge('conv11_mbox_conf', 'conv11_mbox_conf_perm');
g.setEdge('conv11_mbox_conf_perm', 'conv11_mbox_conf_flat');

g.setEdge('conv11_mbox_conf_flat', 'mbox_conf');
g.setEdge('mbox_conf', 'mbox_conf_reshape');
g.setEdge('conv11_mbox_priorbox', 'mbox_priorbox');
g.setEdge('mbox_priorbox', 'detection_out');
g.setEdge('mbox_conf_reshape', 'mbox_conf_softmax');
g.setEdge('mbox_conf_softmax', 'detection_out');

//#endregion


g.nodes().forEach(function (v) {
    var node = g.node(v);
    // Round the corners of the nodes
    node.rx = node.ry = 5;
});


// Create the renderer
var render = new dagreD3.render();

// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
    svgGroup = svg.append("g");

// Run the renderer. This is what draws the final graph.
render(d3.select("svg g"), g);

// Center the graph
var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
svg.attr("height", g.graph().height + 40);
</script> ![dagre-bug](https://user-images.githubusercontent.com/51075757/67839832-8fb16580-fb1a-11e9-8190-a4bf2753ee6a.JPG)