Skip to content

Commit

Permalink
Merge pull request #67 from magjac/options-size-fit-scale-return-exis…
Browse files Browse the repository at this point in the history 
…ting

Improvements for Observable use
  • Loading branch information
Magnus Jacobsson authored Jun 10, 2018
2 parents 3989121 + 8ca705b commit 11724ad
Show file tree
Hide file tree
Showing 30 changed files with 623 additions and 177 deletions.
36 changes: 30 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Renders SVG from graphs described in the [DOT](https://www.graphviz.org/doc/info
* Animated growth of entering edges
* Panning & zooming of the generated graph

Graphviz methods all return the graphviz renderer instance, allowing the concise application of multiple operations on a given graph renderer instance via method chaining.
Graphviz methods typically return the graphviz renderer instance, allowing the concise application of multiple operations on a given graph renderer instance via method chaining.

To render a graph, select an element, call [*selection*.graphviz](#selection_graphviz), and then render from a [DOT](https://www.graphviz.org/doc/info/lang.html) source string. For example:

Expand Down Expand Up @@ -103,15 +103,31 @@ The following table summarizes the recommended script type:

#### Creating a Graphviz Renderer on an Existing Selection

<a name="selection_graphviz" href="#selection_graphviz">#</a> <i>selection</i>.<b>graphviz</b>([<i>useWorker</i>]) [<>](https://github.com/magjac/d3-graphviz/blob/master/src/selection/graphviz.js "Source")
<a name="selection_graphviz" href="#selection_graphviz">#</a> <i>selection</i>.<b>graphviz</b>([<i>options</i>]) [<>](https://github.com/magjac/d3-graphviz/blob/master/src/selection/graphviz.js "Source")

Returns a new graphviz renderer instance on the given *selection*. If *useWorker* is specified and falsey, no web worker is used for the layout stage.
Returns a new graphviz renderer instance on the given *selection*. If *options* is specified and is an object, its properties are taken to be options to the graphviz renderer. All options except the *useWorker* option can also be changed later, using individual methods or the [<i>graphviz</i>.<b>options</b>](#graphviz_options) method, see below. The currently supported options are:

| Option | Default value |
|--------|---------------|
| useWorker | true |
| [engine](#graphviz_engine) | 'dot' |
| [totalMemory](#graphviz_totalMemory) | undefined (giving [Viz.js](https://github.com/mdaines/viz.js/) default) |
| [keyMode](#graphviz_keyMode) | 'title' |
| [fade](#graphviz_fade) | true |
| [tweenPaths](#graphviz_tweenPaths) | true |
| [tweenShapes](#graphviz_tweenShapes) | true |
| [convertEqualSidedPolygons](#graphviz_convertEqualSidedPolygons) | true |
| [tweenPrecision](#graphviz_tweenPrecision) | 1 |
| [growEnteringEdges](#graphviz_growEnteringEdges) | true |
| [zoom](#graphviz_zoom) | true |

If the *useWorker* option is falsey, no web worker is used for the layout stage. The rest of the options are described below. Only the specified options will be changed. The others will keep their current values. If *options* is a boolean it is taken to be the useWorker option (for backwards compatibility).

#### Creating a Graphviz Renderer Using a Selector String or a Node

<a name="d3_graphviz" href="#d3_graphviz">#</a> <b>d3.graphviz</b>(<i>selector</i>[, <i>useWorker</i>]) [<>](https://github.com/magjac/d3-graphviz/blob/master/src/graphviz.js "Source")
<a name="d3_graphviz" href="#d3_graphviz">#</a> <b>d3.graphviz</b>(<i>selector</i>[, <i>options</i>]) [<>](https://github.com/magjac/d3-graphviz/blob/master/src/graphviz.js "Source")

Creates a new graphviz renderer instance on the first element matching the given *selector* string. If the *selecor* is not a string, instead creates a new graphviz renderer instance on the specified node. If *useWorker* is specified and falsey, no web worker is used for the layout stage.
Creates a new graphviz renderer instance on the first element matching the given *selector* string. If the *selector* is not a string, instead creates a new graphviz renderer instance on the specified node. See [<i>selection</i>.<b>graphviz</b>](#selection_graphviz) for a description of the *options* argument.

### Rendering

Expand Down Expand Up @@ -156,6 +172,12 @@ Sets the [Graphviz](http://www.graphviz.org) layout engine name to the specified

If *callback* is specified and not null, it is called with the `this` context as the graphviz instance and the error message as the first argument, if the layout computation encounters an error. If *callback* is null, removes any previously registered callback.

### Setting and Getting Options

<a name="graphviz_options" href="#graphviz_options">#</a> <i>graphviz</i>.<b>options</b>([<i>options</i>]) [<>](https://github.com/magjac/d3-graphviz/blob/master/src/options.js "Source")

If *options* is specified it is taken to be an object whose properties are used to set options to the graphviz renderer. See [<i>selection</i>.<b>graphviz</b>](#selection_graphviz) for a list of supported options. Most options can also be changed by individual methods which are described separately. If *options* is not specified, a copy of the currently set options are returned as an object.

### Images
<a name="graphviz_addImage" href="#graphviz_images">#</a> <i>graphviz</i>.<b>addImage</b>(<i>path</i>,<i>width</i>,<i>height</i>) [<>](https://github.com/magjac/d3-graphviz/blob/master/src/images.js "Source")

Expand Down Expand Up @@ -205,7 +227,7 @@ For advanced usage, the grahviz renderer provides methods for custom control flo

Adds or removes a *listener* to the graphviz renderer instance for the specified event *typenames*. The *typenames* is one of the following string event types:

* `initEnd` - when the graphviz renderer has finished initialization.
* `initEnd` - when the graphviz renderer has finished initialization.¹
* `start` - when analysis of the DOT source starts.
* `layoutStart` - when the layout of the DOT source starts.
* `layoutEnd` - when the layout of the DOT source ends.
Expand All @@ -220,6 +242,8 @@ Adds or removes a *listener* to the graphviz renderer instance for the specified
* `restoreEnd` - when possibly converted paths and shapes have been restored after the transition.
* `end` - when the graphviz renderer has finished all actions.

¹ If a web worker is not used, this event is issued before [d3.graphviz](#d3_graphviz) or [<i>selection</i>.<b>graphviz</b>](#selection_graphviz) returns which means that a *listener* registered with a subsequent [<i>graphviz</i>.<b>on</b>](#graphviz_on) will not be called since it's registered too late.

Note that these are *not* native DOM events as implemented by [*selection*.on](https://github.com/d3/d3-selection#selection_on) and [*selection*.dispatch](https://github.com/d3/d3-selection#selection_dispatch), but graphviz events!

The type may be optionally followed by a period (`.`) and a name; the optional name allows multiple callbacks to be registered to receive events of the same type, such as `start.foo` and `start.bar`. To specify multiple typenames, separate typenames with spaces, such as `interrupt end` or `start.foo start.bar`.
Expand Down
13 changes: 13 additions & 0 deletions examples/basic-unkg.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://unpkg.com/[email protected]/viz.js" type="application/javascript"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

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

</script>
177 changes: 78 additions & 99 deletions examples/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,7 @@
.on("initEnd", render);

function render() {
var dotLines = dots[dotIndex];
var dot = dotLines.join('');
var dot = dots[dotIndex];
graphviz
.renderDot(dot)
.on("end", function () {
Expand All @@ -30,103 +29,83 @@
}

var dots = [
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728"]',
' b [fillcolor="#1f77b4"]',
' a -> b',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728"]',
' c [fillcolor="#2ca02c"]',
' b [fillcolor="#1f77b4"]',
' a -> b',
' a -> c',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728"]',
' b [fillcolor="#1f77b4"]',
' c [fillcolor="#2ca02c"]',
' a -> b',
' a -> c',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728", shape="box"]',
' b [fillcolor="#1f77b4", shape="parallelogram"]',
' c [fillcolor="#2ca02c", shape="pentagon"]',
' a -> b',
' a -> c',
' b -> c',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="yellow", shape="star"]',
' b [fillcolor="yellow", shape="star"]',
' c [fillcolor="yellow", shape="star"]',
' a -> b',
' a -> c',
' b -> c',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728", shape="triangle"]',
' b [fillcolor="#1f77b4", shape="diamond"]',
' c [fillcolor="#2ca02c", shape="trapezium"]',
' a -> b',
' a -> c',
' b -> c',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728", shape="box"]',
' b [fillcolor="#1f77b4", shape="parallelogram"]',
' c [fillcolor="#2ca02c", shape="pentagon"]',
' a -> b',
' a -> c',
' b -> c',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728"]',
' b [fillcolor="#1f77b4"]',
' c [fillcolor="#2ca02c"]',
' a -> b',
' a -> c',
' c -> b',
'}'
],
[
'digraph {',
' node [style="filled"]',
' b [fillcolor="#1f77b4"]',
' c [fillcolor="#2ca02c"]',
' c -> b',
'}'
],
[
'digraph {',
' node [style="filled"]',
' b [fillcolor="#1f77b4"]',
'}'
],
`digraph {
node [style="filled"]
a [fillcolor="#d62728"]
b [fillcolor="#1f77b4"]
a -> b
}`,
`digraph {
node [style="filled"]
a [fillcolor="#d62728"]
c [fillcolor="#2ca02c"]
b [fillcolor="#1f77b4"]
a -> b
a -> c
}`,
`digraph {
node [style="filled"]
a [fillcolor="#d62728"]
b [fillcolor="#1f77b4"]
c [fillcolor="#2ca02c"]
a -> b
a -> c
}`,
`digraph {
node [style="filled"]
a [fillcolor="#d62728" shape="box"]
b [fillcolor="#1f77b4" shape="parallelogram"]
c [fillcolor="#2ca02c" shape="pentagon"]
a -> b
a -> c
b -> c
}`,
`digraph {
node [style="filled"]
a [fillcolor="yellow" shape="star"]
b [fillcolor="yellow" shape="star"]
c [fillcolor="yellow" shape="star"]
a -> b
a -> c
b -> c
}`,
`digraph {
node [style="filled"]
a [fillcolor="#d62728" shape="triangle"]
b [fillcolor="#1f77b4" shape="diamond"]
c [fillcolor="#2ca02c" shape="trapezium"]
a -> b
a -> c
b -> c
}`,
`digraph {
node [style="filled"]
a [fillcolor="#d62728" shape="box"]
b [fillcolor="#1f77b4" shape="parallelogram"]
c [fillcolor="#2ca02c" shape="pentagon"]
a -> b
a -> c
b -> c
}`,
`digraph {
node [style="filled"]
a [fillcolor="#d62728"]
b [fillcolor="#1f77b4"]
c [fillcolor="#2ca02c"]
a -> b
a -> c
c -> b
}`,
`digraph {
node [style="filled"]
b [fillcolor="#1f77b4"]
c [fillcolor="#2ca02c"]
c -> b
}`,
`digraph {
node [style="filled"]
b [fillcolor="#1f77b4"]
}`,
];

</script>
9 changes: 5 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,15 @@
"report": "nyc report --reporter=lcov",
"coverage": "nyc report --reporter=text-lcov > coverage.lcov && codecov",
"prepublishOnly": "env NODE_ENV=production npm run build && TESTRUNNER='tape' npm run do-test && uglifyjs build/d3-graphviz.js -c -m -o build/d3-graphviz.min.js",
"publicbuild": "env NODE_ENV=production npm run build",
"postpublish": "zip -j build/d3-graphviz.zip -- LICENSE README.md build/d3-graphviz.js build/d3-graphviz.min.js"
},
"nyc": {
"check-coverage": true,
"statements": 99.8,
"branches": 99.6,
"statements": 99.9,
"branches": 99.8,
"functions": 100,
"lines": 99.8,
"lines": 99.9,
"reporter": [
"text-summary"
],
Expand Down Expand Up @@ -65,7 +66,7 @@
"d3-path": "^1.0.5",
"d3-selection": "^1.1.0",
"d3-timer": "^1.0.6",
"d3-transition": "^1.1.0",
"d3-transition": "^1.1.1",
"d3-zoom": "^1.5.0",
"viz.js": "^1.8.1"
}
Expand Down
2 changes: 1 addition & 1 deletion src/convertEqualSidedPolygons.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export default function(enable) {

this._convertEqualSidedPolygons = enable;
this._options.convertEqualSidedPolygons = enable;

return this;
};
14 changes: 7 additions & 7 deletions src/dot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,14 @@ export default function(src, callback) {

var graphvizInstance = this;
var worker = this._worker;
var engine = this._engine;
var engine = this._options.engine;
var images = this._images;
var totalMemory = this._totalMemory;
var keyMode = this._keyMode;
var tweenPaths = this._tweenPaths;
var tweenShapes = this._tweenShapes;
var tweenPrecision = this._tweenPrecision;
var growEnteringEdges = this._growEnteringEdges;
var totalMemory = this._options.totalMemory;
var keyMode = this._options.keyMode;
var tweenPaths = this._options.tweenPaths;
var tweenShapes = this._options.tweenShapes;
var tweenPrecision = this._options.tweenPrecision;
var growEnteringEdges = this._options.growEnteringEdges;
var dictionary = {};
var prevDictionary = this._dictionary || {};
var nodeDictionary = {};
Expand Down
4 changes: 2 additions & 2 deletions src/engine.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
export default function(engine) {

if (engine != this._engine && this._data != null) {
if (engine != this._options.engine && this._data != null) {
throw Error('Too late to change engine');
}
this._engine = engine;
this._options.engine = engine;

return this;
};
2 changes: 1 addition & 1 deletion src/fade.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export default function(enable) {

this._fade = enable
this._options.fade = enable

return this;
};
6 changes: 6 additions & 0 deletions src/fit.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default function(fit) {

this._options.fit = fit;

return this;
};
Loading

0 comments on commit 11724ad

Please sign in to comment.