From 758592f4e8f8a9c0e43081f2d2b26e0eb9cc6615 Mon Sep 17 00:00:00 2001 From: Magnus Jacobsson Date: Sat, 21 Sep 2024 16:59:06 +0200 Subject: [PATCH] Port online examples to https://blocks.roadtolarissa.com/ MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. ¹ https://github.com/mbostock/bl.ocks.org/issues/19 ² https://github.com/mbostock/bl.ocks.org ³ https://stackoverflow.com/a/75351168 --- README.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 39de4c4a..60e55557 100644 --- a/README.md +++ b/README.md @@ -36,11 +36,11 @@ d3.graphviz("#graph") .renderDot('digraph {a -> b}'); ``` -[](http://bl.ocks.org/magjac/a23d1f1405c2334f288a9cca4c0ef05b) +[](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 @@ -219,12 +219,12 @@ If *callback* is specified and not null, it is called with the `this` context as ### Images # graphviz.addImage(path,width,height) [<>](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 \ element with width and height attributes. ```js @@ -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 @@ -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 @@ -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). ### NOTE: 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 [selection.selectWithoutDataPropagation()](#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 g element within the first svg element within a specified div element: @@ -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/).