# Way to condense hierarchical tree?
**URL:** https://forum.graphviz.org/t/way-to-condense-hierarchical-tree/50
**Category:** Help
**Created:** [April 17, 2020, 10:01am UTC](https://forum.graphviz.org/t/way-to-condense-hierarchical-tree/50 "2020-04-17T10:01:38Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@Steven](https://forum.graphviz.org/u/Steven)
#### Post date: [April 17, 2020, 10:01am UTC](https://forum.graphviz.org/t/way-to-condense-hierarchical-tree/50/1 "2020-04-17T10:01:39Z")
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 🙂
have a great day 😉
---
### Author:  [@magjac](https://forum.graphviz.org/u/magjac)
#### Post date: [April 17, 2020, 1:59pm UTC](https://forum.graphviz.org/t/way-to-condense-hierarchical-tree/50/2 "2020-04-17T13:59:38Z")
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](https://www.graphviz.org/doc/info/attrs.html#d:ratio) or [len](https://www.graphviz.org/doc/info/attrs.html#d:len)?
If you’re prepared to do some manual segmentation of your graph, you can also create subgraphs and use [rank](https://www.graphviz.org/doc/info/attrs.html#d:rank).
---
### Author:  [@Steven](https://forum.graphviz.org/u/Steven)
#### Post date: [April 20, 2020, 12:17pm UTC](https://forum.graphviz.org/t/way-to-condense-hierarchical-tree/50/3 "2020-04-20T12:17:25Z")
Thanks for your answer @magjac ! I will check that so 😉
---
### Author:  [@Steven](https://forum.graphviz.org/u/Steven)
#### Post date: [April 20, 2020, 2:19pm UTC](https://forum.graphviz.org/t/way-to-condense-hierarchical-tree/50/4 "2020-04-20T14:19:57Z")
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 ?
---
### Author:  [@Steven](https://forum.graphviz.org/u/Steven)
#### Post date: [April 20, 2020, 2:22pm UTC](https://forum.graphviz.org/t/way-to-condense-hierarchical-tree/50/5 "2020-04-20T14:22:47Z")
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;
}
```
---
### Author:  [@magjac](https://forum.graphviz.org/u/magjac)
#### Post date: [April 20, 2020, 8:00pm UTC](https://forum.graphviz.org/t/way-to-condense-hierarchical-tree/50/6 "2020-04-20T20:00:05Z")
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.](https://github.com/mdaines/viz.js/), but apparently not.
---
### Author:  [@Steven](https://forum.graphviz.org/u/Steven)
#### Post date: [April 21, 2020, 12:22pm UTC](https://forum.graphviz.org/t/way-to-condense-hierarchical-tree/50/7 "2020-04-21T12:22:39Z")
Oh yes, you’re absolutly right ! I used vis.js ^^
It’s worked, thx a lot for your help 😉
It’s look like that now :
have a good day 😉
---
### Author:  [@magjac](https://forum.graphviz.org/u/magjac)
#### Post date: [April 21, 2020, 12:31pm UTC](https://forum.graphviz.org/t/way-to-condense-hierarchical-tree/50/8 "2020-04-21T12:31:37Z")
I’m glad you solved it 🙂. How did you do it?
---
### Author:  [@Steven](https://forum.graphviz.org/u/Steven)
#### Post date: [April 21, 2020, 12:54pm UTC](https://forum.graphviz.org/t/way-to-condense-hierarchical-tree/50/9 "2020-04-21T12:54:57Z")
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](https://github.com/danielcaldas/react-d3-graph)) to see image upper 😉