2f:T486,chart3 = { const htmlContent = html`

` const container = d3.select(htmlContent); const svg = container.select("svg"); const button = container.select("button"); const height = svg.attr("height"); update(); button.on("click", update); function update() { let data = []; // We need different number of data for removing existent data fields or introducing new data fields let numItems = Math.ceil(Math.random() * 10); for (let i = 0; i < numItems; ++i) { data.push(Math.random() * 800); } const r = 40; svg.selectAll("circle") .data(data) .join(enter => enter.append("circle") .attr("cx", d => d) .attr("cy", 50) , update => update, exit => exit.transition() .duration(2500) .attr("cy", height+r) .remove() ) .transition() .duration(2000) .attr("cx", d => d) .attr("r", r) .attr("class", "circle"); } return htmlContent; }30:T74f,{ const htmlContent = html`

` const container = d3.select(htmlContent); const svg = container.select("svg"); const button = container.select("button"); const r = svg.select("circle").attr("r"); let data = [0, 0, 0]; update(); button.on("click", update); function getAngle(circ) { // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2 return Math.atan2(circ.attr("cy"), circ.attr("cx")); } function getInterpolator(cur, d) { let currentAngle = getAngle(cur); if (d - currentAngle > Math.PI) { d -= 2 * Math.PI; } else if (currentAngle - d > Math.PI) { d += 2 * Math.PI; } return d3.interpolate(currentAngle, d); } // function getCurrentAngle(el) { let x = d3.select(el).attr('cx'); let y = d3.select(el).attr('cy'); return Math.atan2(y, x); } function update() { for (let i = 0; i < 3; ++i) { data[i] = Math.random() * 2 * Math.PI; } svg.select("g") .selectAll("circle") .data(data) .join("circle") .attr("r", 7) .attr("class", "dot") .transition() .duration(1000) .tween("circumference", function(d) { // Need to use function not arrow function here const cur = d3.select(this); const currentAngle = getAngle(cur); let interpolator = getInterpolator(cur, d); return (t) => { const angle = interpolator(t); cur.attr("cx", r * Math.cos(angle)); cur.attr("cy", r * Math.sin(angle)); }; }) } return htmlContent; }31:[] 2d:{"title":"D3 Transition","cells":[{"id":0,"value":"# D3 Transition","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"## Example in D3 in Depth\n\nhttps://www.d3indepth.com/transitions/","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"#### Without transition","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"chart = {\n const htmlContent = html`\n\n

\n\n`\n const container = d3.select(htmlContent);\n const svg = container.select(\"svg\");\n const button = container.select(\"button\");\n update();\n button.on(\"click\", update);\n \n function update() {\n let data = [];\n for (let i = 0; i < 5; ++i) {\n data.push(Math.random() * 800);\n }\n svg.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cy\", 50)\n .attr(\"r\", 40)\n .attr(\"class\", \"circle\")\n .attr(\"cx\", d => d);\n }\n\n return htmlContent;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"#### With transition","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"chart2 = {\n const htmlContent = html`\n\n

\n\n`\n const container = d3.select(htmlContent);\n const svg = container.select(\"svg\");\n const button = container.select(\"button\");\n update();\n button.on(\"click\", update);\n \n function update() {\n let data = [];\n for (let i = 0; i < 5; ++i) {\n data.push(Math.random() * 800);\n }\n svg.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cy\", 50)\n .attr(\"r\", 40)\n .attr(\"class\", \"circle\")\n .transition()\n .attr(\"cx\", d => d);\n }\n\n return htmlContent;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"#### With different transition for enter and exit","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"#### tween()","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"{\n const htmlContent = html`\n\n

\n\n`\n const container = d3.select(htmlContent);\n const svg = container.select(\"svg\");\n const button = container.select(\"button\");\n const r = svg.select(\"circle\").attr(\"r\");\n update();\n button.on(\"click\", update);\n\n function update() {\n let data = [];\n for (let i = 0; i < 3; ++i) {\n data.push(Math.random() * 2 * Math.PI);\n }\n svg.select(\"g\")\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"r\", 7)\n .attr(\"class\", \"circle\")\n .transition()\n .attr(\"cx\", d => r * Math.cos(d))\n .attr(\"cy\", d => r * Math.sin(d));\n \n }\n\n return htmlContent;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}