Skip to content

Commit

Permalink
Fix intentation of code samples
Browse files Browse the repository at this point in the history
  • Loading branch information
mdaines committed Aug 25, 2023
1 parent 4a8045e commit d989cbb
Showing 1 changed file with 25 additions and 25 deletions.
50 changes: 25 additions & 25 deletions packages/viz/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,49 +6,49 @@

HTML attribute values are written as an object literal with a "html" property:

{ label: { html: "<i>the label</i>" } }
{ label: { html: "<i>the label</i>" } }

* Accept a "reduce" option. This has the same effect as using the -x Graphviz command-line option. When using the neato layout engine, it prunes isolated nodes.

* Accept default attributes for graphs, nodes, and edges in render options. This is similar to the -G, -N, -E options provided by the Graphviz command-line.

Setting the default shape for nodes:

viz.render("digraph { a -> b }", { defaultAttributes: { node: { shape: "circle" } } });
viz.render("digraph { a -> b }", { defaultAttributes: { node: { shape: "circle" } } });

These attributes take precedence over default attributes specified in string and object input.

* Accept an object that represents a graph as input for render(). This is a JSON object similar in structure to the Graphviz DOT syntax.

Rendering with an object:

// DOT: digraph { a -> b }
viz.render({ directed: true, edges: [{ tail: "a", head: "b" }] });
// DOT: digraph { a -> b }
viz.render({ directed: true, edges: [{ tail: "a", head: "b" }] });

Another example:

viz.render({
directed: true,
defaultAttributes: {
viz.render({
directed: true,
defaultAttributes: {
node: {
shape: "circle"
}
},
nodes: [
{ name: "a", attributes: { label: "A", color: "red" } },
],
edges: [
{ tail: "a", head: "b" },
],
subgraphs: [
{
name: "cluster_1",
nodes: [
{ name: "b", attributes: { label: "B", color: "blue" } }
]
}
]
});
shape: "circle"
}
},
nodes: [
{ name: "a", attributes: { label: "A", color: "red" } },
],
edges: [
{ tail: "a", head: "b" },
],
subgraphs: [
{
name: "cluster_1",
nodes: [
{ name: "b", attributes: { label: "B", color: "blue" } }
]
}
]
});

Edge ports can be specified using the headport and tailport attributes.

Expand Down

0 comments on commit d989cbb

Please sign in to comment.