Skip to content

Commit

Permalink
Port online examples to https://blocks.roadtolarissa.com/
Browse files Browse the repository at this point in the history 
http://bl.ocks.org/ now redirects to https://gist.github.com/. An
issue¹ pointing this out was closed without action and the repository²
has been archived since Jan 10, 2023. An SO answer³ recommends
https://blocks.roadtolarissa.com/ instead.

¹ mbostock/bl.ocks.org#19
² https://github.com/mbostock/bl.ocks.org
³ https://stackoverflow.com/a/75351168
  • Loading branch information
@magjac
magjac committed Sep 22, 2024
1 parent c25cca6 commit 758592f
Showing 1 changed file with 17 additions and 17 deletions.
34 changes: 17 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@ d3.graphviz("#graph")
.renderDot('digraph {a -> b}');
```

[<img src="images/a-b.png">](http://bl.ocks.org/magjac/a23d1f1405c2334f288a9cca4c0ef05b)
[<img src="images/a-b.png">](https://blocks.roadtolarissa.com/magjac/a23d1f1405c2334f288a9cca4c0ef05b)

This basic example can also be seen [here](http://bl.ocks.org/magjac/a23d1f1405c2334f288a9cca4c0ef05b).
This basic example can also be seen [here](https://blocks.roadtolarissa.com/magjac/a23d1f1405c2334f288a9cca4c0ef05b).

A more colorful demo can be seen [here](http://bl.ocks.org/magjac/4acffdb3afbc4f71b448a210b5060bca).
A more colorful demo can be seen [here](https://blocks.roadtolarissa.com/magjac/4acffdb3afbc4f71b448a210b5060bca).

## Installing

Expand Down Expand Up @@ -219,12 +219,12 @@ If *callback* is specified and not null, it is called with the `this` context as
### 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")

Add image references as dictated by viz.js, **must be done before renderDot() or dot()**.
Add image references as dictated by viz.js, **must be done before renderDot() or dot()**.
addImage can be called multiple times.

*path* may be a filename ("example.png"), relative or absolute path ("/images/example.png"), or a URL ("http://example.com/image.png")
Dimensions(*width*,*height*) may be specified with units: in, px, pc, pt, cm, or mm. If no units are given or dimensions are given as numbers, points (pt) are used.
*path* may be a filename ("example.png"), relative or absolute path ("/images/example.png"), or a URL ("http://example.com/image.png")
Dimensions(*width*,*height*) may be specified with units: in, px, pc, pt, cm, or mm. If no units are given or dimensions are given as numbers, points (pt) are used.

Graphviz does not actually load image data when this option is used — images are referenced with the dimensions given, e.g. in SVG by an \<image> element with width and height attributes.

```js
Expand Down Expand Up @@ -333,7 +333,7 @@ If *enable* is true (default), enables animated growth of entering edges, else d

**Note:** Growing edges with style `tapered` is not supported.

A demo of animated growth of entering edges can be seen [here](http://bl.ocks.org/magjac/f485e7b915c9699aa181a11e183f8237)
A demo of animated growth of entering edges can be seen [here](https://blocks.roadtolarissa.com/magjac/f485e7b915c9699aa181a11e183f8237)

### Controlling Path Tweening

Expand All @@ -355,7 +355,7 @@ If *enable* is true (default), enables shape tweening during transitions, else d

If *enable* is true (default), enables conversion of polygons with equal number of sides during shape tweening, else disables conversion. Not applicable when shape tweening is disabled. At the end of the transition the original SVG shape element is restored.

A demo of shape tweening can be seen [here](http://bl.ocks.org/magjac/69dc955a2e2ee085f60369c4a73f92a6).
A demo of shape tweening can be seen [here](https://blocks.roadtolarissa.com/magjac/69dc955a2e2ee085f60369c4a73f92a6).

### Controlling Panning & Zooming

Expand Down Expand Up @@ -505,17 +505,17 @@ node_modules/.bin/http-server .

There are also a few examples directly available online:

* [Basic Example](http://bl.ocks.org/magjac/a23d1f1405c2334f288a9cca4c0ef05b)
* [Demo](http://bl.ocks.org/magjac/4acffdb3afbc4f71b448a210b5060bca)
* [Shape Tweening Demo](http://bl.ocks.org/magjac/69dc955a2e2ee085f60369c4a73f92a6)
* [Delete Nodes and Edge Demo Application](https://bl.ocks.org/magjac/28a70231e2c9dddb84b3b20f450a215f)
* [Animated Growth of Entering Edges Demo](http://bl.ocks.org/magjac/f485e7b915c9699aa181a11e183f8237)
* [Basic Example](https://blocks.roadtolarissa.com/magjac/a23d1f1405c2334f288a9cca4c0ef05b)
* [Demo](https://blocks.roadtolarissa.com/magjac/4acffdb3afbc4f71b448a210b5060bca)
* [Shape Tweening Demo](https://blocks.roadtolarissa.com/magjac/69dc955a2e2ee085f60369c4a73f92a6)
* [Delete Nodes and Edge Demo Application](https://blocks.roadtolarissa.com/magjac/28a70231e2c9dddb84b3b20f450a215f)
* [Animated Growth of Entering Edges Demo](https://blocks.roadtolarissa.com/magjac/f485e7b915c9699aa181a11e183f8237)

## Building Applications with [d3-graphviz](https://github.com/magjac/d3-graphviz)
### SVG structure
The generated SVG graph has *exactly* the same structure as the SVG generated by [@hpcc-js/wasm](https://github.com/hpcc-systems/hpcc-js-wasm), so applications utilizing knowledge about this structure should be able to use [d3-graphviz](https://github.com/magjac/d3-graphviz) without adaptations. If [path tweening](#controlling-path-tweening) or [shape tweening](#controlling-path-tweening) is used, some SVG elements may be converted during transitions, but they are restored to the original shape after the transition.

See this [example application](https://bl.ocks.org/magjac/28a70231e2c9dddb84b3b20f450a215f).
See this [example application](https://blocks.roadtolarissa.com/magjac/28a70231e2c9dddb84b3b20f450a215f).

### <b>NOTE:</b> avoid [*selection*.select](https://github.com/d3/d3-selection#selection_select)
When selecting elements within the graph, [*selection*.select](https://github.com/d3/d3-selection#selection_select) *must not be used* if additional rendering is going to be performed on the same graph renderer instance. This is due to the fact that [*selection*.select](https://github.com/d3/d3-selection#selection_select) propagates data from the elements in the selection to the corresponding selected elements, causing already bound data to be overwritten with incorrect data and subsequent errors. Use the [<i>selection</i>.<b>selectWithoutDataPropagation</b>()](#selection_selectWithoutDataPropagation) (a [d3-graphviz](https://github.com/magjac/d3-graphviz) extension of [d3-selection](https://github.com/d3/d3-selection)) or [*selection*.selectAll](https://github.com/d3/d3-selection#selection_selectAll), which do not propagate data or [*selection*.node](https://github.com/d3/d3-selection#selection_node) and [querySelector](https://www.w3.org/TR/selectors-api/#queryselector). For example, to select the first <b>g</b> element within the first <b>svg</b> element within a specified <b>div</b> element:
Expand Down Expand Up @@ -584,7 +584,7 @@ In order to run the tests you need [Node.js](https://nodejs.org/en/download/pack
## Credits

* [Gordon Smith](https://github.com/GordonSmith) for [@hpcc-js/wasm](https://github.com/hpcc-systems/hpcc-js-wasm).
* [Mike Bostock](https://github.com/mbostock) for the [Path Tween](https://bl.ocks.org/mbostock/3916621) code and [Stroke Dash Interpolation](https://bl.ocks.org/mbostock/5649592) code.
* [Aaron Bycoffe](https://bl.ocks.org/bycoffe) for the [Element rotation with point-along-path interpolation](http://bl.ocks.org/bycoffe/c3849a0b15234d7e32fc) code.
* [Mike Bostock](https://github.com/mbostock) for the [Path Tween](https://blocks.roadtolarissa.com/mbostock/3916621) code and [Stroke Dash Interpolation](https://blocks.roadtolarissa.com/mbostock/5649592) code.
* [Aaron Bycoffe](https://blocks.roadtolarissa.com/bycoffe) for the [Element rotation with point-along-path interpolation](https://blocks.roadtolarissa.com/bycoffe/c3849a0b15234d7e32fc) code.
* [Marcin Stefaniuk](https://github.com/mstefaniuk) for inspiration and learning through [graph-viz-d3-js](https://github.com/mstefaniuk/graph-viz-d3-js).
* [Ueyama Satoshi](https://github.com/gyuque) for inspiring growing edges through [livizjs](http://ushiroad.com/jsviz/).

0 comments on commit 758592f

Please sign in to comment.