假设您在某些 GUI 插图应用程序中绘制了图表。您将图表导出为 SVG 并将其作为左对齐块图像插入 HTML 页面中。
您故意缩放图表，以便图表中文本的大小与 HTML 页面周围内容中的 16px 可重排正文文本相匹配。
在 23 英寸显示器上的最大化浏览器窗口中，可重排正文文本列比图表宽得多，在图表右侧留下了大片空白区域。
如果图表填充更多的可用宽度，看起来会更好。
但是，您不想只放大整个 SVG 以适应可用宽度，因为图中的文本也会放大。 图中的文字会开始喊叫。您希望图表中的文本保持相同的 16px 大小。
您可以使用什么应用程序或工具来绘制动态调整大小以适合 HTML 容器宽度但具有固定大小文本的图表？
特别是，作为起点，图在形式上是图，包括有向图：由边连接的节点。
使用d3-graphviz。
将 HTML 容器的宽度动态注入到 DOT 源中。
当容器调整大小时，重新渲染 DOT 以匹配容器宽度。
提示： 运行以下代码片段“完整页面”，然后调整浏览器窗口的大小。
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 1em;
font-family: Arial;
font-size: 16px;
}
#dot {
display: none;
}
#graph-container {
width: 100%;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/[email protected]/dist/index.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.js"></script>
<div id="dot">
digraph {
ratio="fill"
size="<span id="graph-width">#</span>,<span id="graph-height">#</span>"
margin=0
pad=0
bgcolor="#f0f0f0"
node [shape=box,style="rounded,filled",color="#ccccff", fontname="Arial", fontsize="12pt"]
edge [color="#6666ff"]
a -> d
b -> d
c -> d
a [label="Alpha"];
b [label="Bravo"];
c [label="Charlie"];
d [label="Width: <span id="width">#</span>px"];
}
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="graph-container" style="height: 20em;"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<script>
const graphContainer = d3.select("#graph-container");
const width = graphContainer.node().clientWidth;
const height = graphContainer.node().clientHeight;
const dpi = 96
// Redraw
function redrawGraph(container, { width, height }) {
document.getElementById("width").innerText = width
document.getElementById("graph-width").innerText = width / dpi
document.getElementById("graph-height").innerText = height / dpi
graphContainer.graphviz()
.renderDot(document.getElementById("dot").textContent);
}
// Detect container resize
const resizeObserver = new ResizeObserver((entries, observer) => {
for (const entry of entries) {
redrawGraph(entry.target, entry.contentRect);
}
})
const container = document.querySelector('#graph-container');
resizeObserver.observe(container)
// Initial draw
document.getElementById("width").innerText = container.clientWidth
document.getElementById("graph-width").innerText = container.clientWidth / dpi
document.getElementById("graph-height").innerText = container.clientHeight / dpi
graphContainer.graphviz()
.renderDot(document.getElementById("dot").textContent);
</script>
</body>
</html>