У меня есть рабочая веб-страница, на которой отображается график, операторы определения которого хранятся в отдельном сценарии JS.График отображается с использованием D3 и Graphviz, хотя я думаю, что моя проблема заключается только в JavaScript (в котором я новичок).
Это источник веб-страницы:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://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.3.1/build/d3-graphviz.min.js"></script>
<script type="text/javascript" src="Graph_Test1.js"></script>
<div id="graph" style="text-align: center;">
</div>
</body>
<script>
var dotIndex = 0;
var graphviz = d3.select("#graph").graphviz()
.transition(function () {
return d3.transition("main")
.ease(d3.easeLinear)
.delay(500)
.duration(1500);
})
.logEvents(true)
.on("initEnd", render);
function render() {
var dotLines = dots[dotIndex];
var dot = dotLines.join('');
graphviz
.renderDot(dot)
.tweenShapes(false)
.tweenPaths(false)
.on("end", function () {
dotIndex = (dotIndex + 1) % dots.length;
render();
});
}
var dots = [ gvFile ];
</script>
Этоисточник для Graph_test1.js:
gvFile = [
'digraph Test1 {',
' graph [bgcolor="dimgrey",',
' fontcolor="black",',
' color="white"];',
'"Test 1 Node 1" -> "Test 1 Node 2"',
'"Test 1 Node 2" -> "Test 1 Node 3"',
'}'
];
И это источник для другого тестового графика Graph_test2.js:
gvFile = [
'digraph Test2 {',
' graph [bgcolor="lightblue",',
' fontcolor="white",',
' color="white"];',
'"Test 2 Node 1" -> "Test 2 Node 2"',
'"Test 2 Node 2" -> "Test 2 Node 3"',
'"Test 2 Node 2" -> "Test 2 Node 4"',
'}'
];
Вопрос: Я могу выбратькакой график визуализировать, изменив тег, который задает Graph_Test1.js, или создайте отдельную страницу для каждого графика, но это неуклюже.Я хотел бы иметь раскрывающийся список, в котором перечислены все возможные графики, а затем отображается выбранный мной график.
Я попытался ответить на этот вопрос сам, и вот моя (очень неуклюжая) попытка:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<select id="graph-select">
<option selected value="base">Please Select</option>
<option value="Graph_Test1.js">Test1</option>
<option value="Graph_Test2.js">Test2</option>
<option value="Render">Render</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://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.3.1/build/d3-graphviz.min.js"></script>
<!--script type="text/javascript" src="Falcon_Graph.js"></script-->
<div id="graph" style="text-align: center;">
</div>
</body>
<script>
var dots;
var dotIndex = 0;
var gvFile;
var graphviz = d3.select("#graph").graphviz();
$(function() {
$("#graph-select").change(function() {
var selection = $(this).val();
console.log(selection);
$.getScript(selection);
if (selection == 'Render') {
render
} else {
console.log(gvFile);
dots = [ gvFile ];
graphviz = d3.select("#graph").graphviz()
.transition(function() {
return d3.transition("main")
.ease(d3.easeLinear)
.delay(500)
.duration(1500);
}
)
.logEvents(true)
.on("initEnd", render);
}
}
)
}
);
function render() {
var dotLines = dots[dotIndex];
var dot = dotLines.join('');
graphviz
.renderDot(dot)
.tweenShapes(false)
.tweenPaths(false)
.on("end", function () {
dotIndex = (dotIndex + 1) % dots.length;
render();
});
};
</script>
так что мой код кажется очень удачным или пропущенным - его можно сделать для рендеринга обоих графиков, но не согласованно - иногда я выбираю один график из раскрывающегося списка, и он отображает другой.Я думаю, проблема в том, что я не знаю, как заставить страницу ждать от функции getScript для запуска и заполнения переменной gvFile, прежде чем пытаться отобразить график, поэтому я попытался добавить дискретный 'рендер'вариант раскрывающегося списка, чтобы заиметь то, что было в данный момент в gvFile.
В идеале я бы также хотел, чтобы в раскрывающемся списке отображался список файлов на сервере (например, в "Графиках /"), но я не мог найти простых примеров этого).
Примечание. Определения графиков хранятся в виде js-файлов, которые заполняют переменную, поскольку это казалось намного проще, чем «идеальное» решение, которое заключалось бы в сохранении графиков в их собственном формате:
digraph Test1 {
graph [bgcolor="dimgrey",
fontcolor="black",
color="white"];
"Test 1 Node 1" -> "Test 1 Node 2"
"Test 1 Node 2" -> "Test 1 Node 3"
}
, а затем используйте JavaScript для чтения этих определений и заполнения массива dots.
Я не добавил 'D3' или 'GraphViz' к тегам, так как не думаю, что они действительно актуальнык моей проблеме.