Way to condense hierarchical tree?

Help
1

Hi there !

I use Viz.js, library with GraphViz in js, and I come to you if there is possibility to render herarchical tree more condensed ?
I’ve go tthis graph :

DS_118_Aperçu_1
DS_118_Aperçu_1923×468 2.3 MB

But it’s too tall ! The problem is the big link … There is a way to set it more condensed?
This is my config :

const optionsVizGraph = {
  "layout":{
    "hierarchical":{
      "enabled" : true,
      "direction":"DU",
      "nodeSpacing":200
    }
  }
};

const graphViz = new Network(document.createElement("div"), elementsGraph, optionsVizGraph);

I don’t know if we can talk about JS here, but thnaks in advance if you can help me :slight_smile:

have a great day :wink:

2

There’s no Viz.js option you can use for that, but there’s plenty of DOT attributes that might be useful. Have you tried e.g. ratio or len?

If you’re prepared to do some manual segmentation of your graph, you can also create subgraphs and use rank.

1 Like
3

Thanks for your answer @magjac ! I will check that so :wink:

1 Like
4

So i write this code :

let dotGraphString = 'dossardGraph {';
dotGraphString += 'ratio=0.5;';

graphData.nodes.forEach(node => {
  const childrenNodes = graphUtils.findQuestionsParentOrChildren(node.id, graphData, DirectionQuestionNeighbour.CHILD, this.state.allQuestions, true);
  childrenNodes.forEach(childNode => dotGraphString += node.id + ' -> ' + childNode.id + ";");
});
dotGraphString += '}';

const parsedData = vis.network.convertDot(dotGraphString);

const elementsGraph = {
  nodes : parsedData.nodes,
  edges: parsedData.edges
};

const optionsVizGraph = {
  "layout":{
    "hierarchical":{
      "enabled" : true,
      "direction":"UD",
      "nodeSpacing":200
    }
  }
};

const graphViz = new Network(document.createElement("div"), elementsGraph, optionsVizGraph);

But I think the ratio attribute is not apply … because my tree doesn’t change …
I made something wrong ?

5

And just to precise, my DOT graph looks like that :

dossardGraph {
ratio=0.5;

#111:695 -> #93:407;#114:689 -> #103:384;#114:689 -> #94:403;#115:683 -> #95:402;#116:680 -> #103:386;#107:697 -> #102:387;#108:694 -> #94:403;#108:694 -> #103:384;#109:694 -> #114:691;#110:691 -> #101:392;#111:690 -> #102:388;#112:690 -> #94:402;#113:688 -> #101:393;#114:688 -> #104:384;#116:679 -> #101:393;#105:698 -> #104:383;#106:697 -> #93:408;#107:696 -> #109:695;#108:693 -> #97:398;#109:693 -> #103:385;#110:690 -> #104:385;#113:687 -> #94:404;#114:687 -> #98:397;#115:681 -> #96:399;#116:678 -> #99:393;#105:697 -> #104:385;#105:697 -> #98:396;#105:697 -> #95:401;#106:696 -> #95:400;#107:695 -> #93:409;#108:692 -> #100:392;#109:692 -> #110:689;#109:692 -> #111:688;#109:692 -> #104:384;#109:692 -> #100:393;#112:688 -> #102:386;#113:686 -> #103:386;#114:686 -> #96:401;#114:686 -> #96:400;#115:680 -> #97:399;#97:399 -> #112:693;#112:693 -> #112:694;#112:694 -> #113:692;#113:692 -> #115:686;#113:692 -> #95:400;#115:686 -> #116:683;#95:400 -> #114:692;#114:692 -> #108:698;#116:683 -> #107:698;#116:683 -> #108:698;#116:683 -> #95:401;#107:698 -> #102:386;#95:401 -> #105:702;#105:702 -> #115:684;#105:702 -> #108:698;#105:702 -> #95:402;#115:684 -> #100:393;#95:402 -> #106:701;#106:701 -> #107:700;#107:700 -> #114:691;#107:700 -> #106:699;#107:700 -> #96:399;#114:691 -> #98:397;#106:699 -> #101:393;#106:699 -> #97:400;#96:399 -> #108:697;#108:697 -> #96:400;#96:400 -> #109:697;#109:697 -> #113:691;#109:697 -> #96:401;#113:691 -> #97:400;#113:691 -> #98:396;#96:401 -> #110:694;#110:694 -> #97:398;#97:398 -> #111:693;#111:693 -> #106:702;#111:693 -> #97:399;#106:702 -> #109:698;#106:702 -> #112:694;#106:702 -> #94:404;#109:698 -> #110:695;#94:404 -> #107:701;#107:701 -> #108:698;#110:695 -> #111:694;#111:694 -> #108:698;#97:400 -> #116:683;#98:396 -> #116:683;#101:393 -> #115:685;#115:685 -> #116:682;#116:682 -> #105:701;#105:701 -> #106:700;#105:701 -> #114:690;#106:700 -> #107:699;#114:690 -> #115:684;#107:699 -> #98:398;#107:699 -> #99:394;#98:398 -> #108:696;#99:394 -> #111:692;#111:692 -> #112:692;#112:692 -> #100:392;#100:392 -> #113:690;#113:690 -> #108:698;#108:696 -> #99:393;#99:393 -> #109:696;#109:696 -> #110:693;#109:696 -> #106:702;#110:693 -> #113:692;#98:397 -> #115:685;#100:393 -> #116:681;#116:681 -> #105:700;#105:700 -> #101:392;#101:392 -> #112:695;#112:695 -> #93:408;#112:695 -> #102:388;#112:695 -> #96:401;#93:408 -> #113:693;#102:388 -> #111:691;#111:691 -> #112:691;#111:691 -> #99:394;#111:691 -> #98:398;#112:691 -> #108:696;#112:691 -> #103:384;#103:384 -> #113:689;#113:689 -> #103:385;#103:385 -> #114:692;#113:693 -> #93:409;#113:693 -> #102:387;#93:409 -> #114:693;#102:387 -> #109:695;#109:695 -> #110:692;#110:692 -> #108:696;#114:693 -> #94:402;#94:402 -> #115:687;#115:687 -> #94:403;#94:403 -> #116:684;#116:684 -> #105:703;#105:703 -> #114:693;#105:703 -> #106:702;#102:386 -> #108:695;#108:695 -> #93:407;#93:407 -> #112:695;#103:386 -> #105:699;#105:699 -> #106:698;#105:699 -> #102:387;#105:699 -> #104:383;#106:698 -> #102:386;#104:383 -> #107:698;#110:689 -> #109:696;#111:688 -> #103:386;#104:384 -> #115:682;#115:682 -> #93:409;#104:385 -> #111:689;#111:689 -> #112:689;#112:689 -> #95:401;
}
6

That is not legal DOT source code. What library are you using? I thought GitHub - mdaines/viz.js: A hack to put Graphviz on the web., but apparently not.

7

Oh yes, you’re absolutly right ! I used vis.js ^^
It’s worked, thx a lot for your help :wink:

It’s look like that now :

New_tree_graph
New_tree_graph527×953 68.7 KB

have a good day :wink:

8

I’m glad you solved it :slightly_smiling_face:. How did you do it?

1 Like
9

With the right library first ^^ Viz.js and build Dotgraph with response of request of my API. It’s look like that :

let dotGraphString = 'digraph G {\n';
dotGraphString += 'ratio = "2"; \n nodesep=0.9; \n';

graphData.nodes.forEach(node => {
  const childrenNodes = graphUtils.findQuestionsParentOrChildren(node.id, graphData, DirectionQuestionNeighbour.CHILD, this.state.allQuestions, true);
  childrenNodes.forEach(childNode => dotGraphString += '\"' + node.id + '\" -> \"' + childNode.id + '\"\n');
});
dotGraphString += '}';

const parsedData = await viz.renderJSONObject(dotGraphString);


for (const node of graphData.nodes){
  const nodeInViz = parsedData.objects.find(dotNode => dotNode.name === node.id);

  const positions = nodeInViz.pos.split(',');
  node.x = Math.round(positions[0]);
  node.y = Math.round(positions[1]);
  if (node.family === TypeQuestionsEnum.AND){
    node.size = 500
  }
  graphNodes.push(node);
}

return graphNodes;

And i use another library (react-d3-graph) to see image upper :wink:

1 Like