This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<body> | |
<script src="//d3js.org/d3.v5.min.js"></script> | |
<script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script> | |
<script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script> | |
<div id="graph" style="text-align: center;"></div> | |
<script> | |
var dotIndex = 0; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<body> | |
<script src="//d3js.org/d3.v4.min.js"></script> | |
<script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script> | |
<script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script> | |
<div id="graph" style="text-align: center;"></div> | |
<script> | |
var dotIndex = 0; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-selection"),require("d3-transition"),require("d3-zoom"),require("d3-interpolate"),require("viz.js")):"function"==typeof define&&define.amd?define(["exports","d3-selection","d3-transition","d3-zoom","d3-interpolate","viz.js"],e):e(t.d3=t.d3||{},t.d3,t.d3,t.d3,t.d3,t.Viz)}(this,function(t,e,n,i,r,o){"use strict";function a(){var t=this._selection,n=e.select(t.node().querySelector("svg"));if(0==n.size())return this;this._zoomSelection=n;var r=[.1,10],o=i.zoom().scaleExtent(r).on("zoom",function(){a.attr("transform",e.event.transform)});this._zoomBehavior=o;var a=e.select(n.node().querySelector("g"));return n.call(o),this._active||h.call(this,a),this}function s(t){var e=t.node().transform;if(e&&0!=e.baseVal.length){var n=e.baseVal.consolidate().matrix;return{x:n.e,y:n.f}}return{x:0,y:0}}function l(t){var e=this._translation,n=t.datum().translation,r=n.x-e.x,o=n.y-e.y;return i.zoomTransform(this._zoomSelection.node()).transla |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<body> | |
<script src="//d3js.org/d3.v5.min.js"></script> | |
<script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script> | |
<script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script> | |
<div id="graph" style="text-align: center;"></div> | |
<script> | |
d3.select("#graph").graphviz() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<body> | |
<h1>Open the console and look for messages</h1> | |
<script src="//d3js.org/d3.v4.min.js"></script> | |
<script> | |
var n = 30000000; | |
console.time('delay1'); |
This is a port of https://bl.ocks.org/mbostock/3916621 to D3 v4 and an attempt to be able to use much higher precision without affecting smoothness. The idea is to precalculate the resampled path before the transision starts, during its delay. The result is a big jump in all but the first transition because of problems (?) with D3 timer:
Actually, what I really want to do is not to use much higher precision, but to do this type of path tweening on many paths simultaneously. This was just an easier way to illustrate the idea and the problem.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<body> | |
<h1>Open the console and look for messages</h1> | |
<script src="//d3js.org/d3.v4.min.js"></script> | |
<script> | |
var period = 1000; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<body> | |
<h1>Open the console and look for messages</h1> | |
<script src="//d3js.org/d3.v4.min.js"></script> | |
<script> | |
var period = 1000; |
NewerOlder