08-27-周三_17-09-29

2025-08-27 17:10:05 +08:00
commit 86df397d8f
12735 changed files with 1145479 additions and 0 deletions
--- a/node_modules/dagre-d3-renderer/dist/demo/style-attrs.html
+++ b/node_modules/dagre-d3-renderer/dist/demo/style-attrs.html
@@ -0,0 +1,105 @@
+<!doctype html>
+
+<meta charset="utf-8">
+<title>Dagre D3 Demo: Style Attributes</title>
+
+<link rel="stylesheet" href="demo.css">
+<script src="../dagre-d3.js"></script>
+
+<h1>Dagre D3 Demo: Style Attributes</h1>
+
+<style id="css">
+text {
+  font-weight: 300;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
+  font-size: 14px;
+}
+
+.node rect {
+  stroke: #333;
+  fill: #fff;
+  stroke-width: 1.5px;
+}
+
+.edgePath path.path {
+  stroke: #333;
+  fill: none;
+  stroke-width: 1.5px;
+}
+
+.arrowhead {
+ stroke: blue;
+ fill: blue;
+ stroke-width: 1.5px;
+}
+
+</style>
+
+<svg id="svg" width=960 height=600></svg>
+
+<section>
+<p>An example showing how styles that are set in the input graph can be applied
+to nodes, node labels, edges, and edge labels in the rendered graph.
+</section>
+
+<script id="js">
+// Create the input graph
+var g = new dagreD3.graphlib.Graph().setGraph({});
+
+// Fill node "A" with the color green
+g.setNode("A", { style: "fill: #afa" });
+
+// Make the label for node "B" bold
+g.setNode("B", { labelStyle: "font-weight: bold" });
+
+// Double the size of the font for node "C"
+g.setNode("C", { labelStyle: "font-size: 2em" });
+
+g.setNode("D", {});
+
+g.setNode("E", {});
+
+// Make the edge from "A" to "B" red, thick, and dashed
+g.setEdge("A", "B", {
+  style: "stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;",
+  arrowheadStyle: "fill: #f66"
+});
+
+// Make the label for the edge from "C" to "B" italic and underlined
+g.setEdge("C", "B", {
+  label: "A to C",
+  labelStyle: "font-style: italic; text-decoration: underline;"
+});
+
+// Make the edge between A and D smoother.
+// see available options for lineInterpolate here: https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate
+g.setEdge("A", "D", {
+  label: "line interpolation different",
+  lineInterpolate: 'basis'
+});
+
+g.setEdge("E", "D", {});
+
+// Make the arrowhead blue
+g.setEdge("A", "E", {
+  label: "Arrowhead class",
+  arrowheadClass: 'arrowhead'
+});
+
+// Create the renderer
+var render = new dagreD3.render();
+
+// Set up an SVG group so that we can translate the final graph.
+var svg = d3.select("svg"),
+    inner = svg.append("g");
+
+// Run the renderer. This is what draws the final graph.
+render(inner, g);
+
+// Center the graph
+var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
+inner.attr("transform", "translate(" + xCenterOffset + ", 20)");
+svg.attr("height", g.graph().height + 40);
+</script>
+
+<script src="demo.js"></script>