Way to condense hierarchical tree?

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 :


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:

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

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

1 Like

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 ?

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;
}

That is not legal DOT source code. What library are you using? I thought https://github.com/mdaines/viz.js/, but apparently not.

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 :

have a good day :wink:

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

1 Like

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