Правильно масштабировать DOT-графику - PullRequest
Новая
       12

Правильно масштабировать DOT-графику

0 голосов
/ 19 февраля 2019

Пожалуйста,

Мне нужно создать SVG-графику с D3-GraphViz, размер которой идеально подходит для области DIV.Я пробовал это много, но безуспешно.

Вот пример кода: 

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.0/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@1.4.0/build/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

d3.select("#graph").graphviz()
    .fade(false)
    .renderDot('digraph  {a -> b}');

</script>

Я видел на сайте D3, что это свойство ".fit (true)", но оно просто не работает.Есть идеи или примеры?

Ответы [ 3 ]

0 голосов
/ 19 февраля 2019

Вы можете сделать это с помощью CSS, масштабируя svg, который производит Graphviz, до размера вашего мастер-элемента #graph: 

#graph svg {
    height: 100%;
    width: auto;
}


<!DOCTYPE html>
<meta charset="utf-8">
<style>
  #graph {
    /* Just an example */
    height: 250px;
  }
  #graph svg {
    height: 100%;
    width: auto;
  }
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.0/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@1.4.0/build/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

d3.select("#graph").graphviz()
    .fade(false)
    .renderDot('digraph  {a -> b}');

</script>
0 голосов
/ 28 мая 2019

У меня была такая же проблема.Просто понял, что источник js настолько устарел (я скопировал и эту строку из примера).Просто измените ссылку на 

<script src="https://unpkg.com/d3-graphviz@2.6.1/build/d3-graphviz.min.js"></script>

После этого все функции, перечисленные в README.md репозитория github, стали доступны.

0 голосов
/ 19 февраля 2019

Я ничего не знаю о d3, но в чистом Graphviz есть инструменты для управления размером вывода, особенно атрибут графика размер в паре с ratio .Они подробно описаны по ссылкам, но позвольте мне показать только один пример:

без size или ratio: 

digraph {
    c ->d
    a -> b
}

enter image description here

с size и ratio=compress: 

digraph {
    size="10,5"
    ratio=compress
    c ->d
    a -> b
}

enter image description here

Если это js, вы можете предоставить size аргументы динамически, верно?

...