Zeichenfläche 1

31:Tcd91,svgAnimation({ time, steps: [ { layers: ['axes'] }, { layers: ['axes', 'residual'] }, { layers: ['axes', 'residual', 'current'] }, { layers: ['axes', 'residual', 'current', 'predictor'] }, { layers: ['axes', 'residual', 'current', 'predictor', 'iter1'] }, { layers: ['axes', 'residual', 'current', 'predictor', 'iter2'] }, { layers: ['axes', 'residual', 'current', 'predictor', 'iter3'] }, { layers: ['axes', 'residual', 'current', 'predictor', 'iter4'] }, { layers: ['axes', 'residual', 'current', 'predictor', 'iter5'] }, { layers: ['axes', 'residual', 'current', 'predictor', 'iter6'] }, { layers: ['axes', 'residual', 'current', 'predictor', 'iter6', 'next'] }, ], width: 0.6 * width, data: html`` })32:[] 2f:{"title":"SVG Animation","cells":[{"id":0,"value":"md`# SVG Animation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`*Create simple step-by-step instruction using SVG.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`\n~~~javascript\nimport {svgAnimation} from '@oberbichler/svg-history'\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"svgAnimation = function({time, steps, data, width=null, height=null}) {\n const svg = d3.select(data);\n \n if (width) {\n svg.attr('width', width);\n }\n \n if (height) {\n svg.attr('height', height);\n }\n \n for (let i = 0; i < steps.length; i++) {\n for (const layer of steps[i].layers) {\n svg.select(`#${layer}`).attr('visibility', 'hidden');\n }\n }\n \n for (const layer of steps[Math.min(time, steps.length - 1)].layers) {\n svg.select(`#${layer}`).attr('visibility', 'visible');\n }\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof time = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 1,\n description: 'Walk through the steps',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}