31:T5dd,chart = { const root = tree(data); const svg = d3.select(DOM.svg(width, width)) .style("width", "100%") .style("height", "auto") .style("padding", "10px") .style("box-sizing", "border-box") .style("font", "10px sans-serif"); const g = svg.append("g"); const link = g.append("g") .attr("fill", "none") .attr("stroke", "#CEB888") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .enter().append("path") .attr("d", d3.linkRadial() .angle(d => d.x) .radius(d => d.y)); const node = g.append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("g") .data(root.descendants().reverse()) .enter().append("g") .attr("transform", d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) `); const circles = node.append("circle") .attr("fill", "#782F40") .attr("r", 4) // Thanks to @bgchen for suggesting "data-tippy-content" here instead of "title" .attr("data-tippy-content", d => d.data.definition); tippy(circles.nodes()); //console.log(tippy(node.nodes())); document.body.appendChild(svg.node()); const box = g.node().getBBox(); svg.remove() .attr("width", box.width) .attr("height", box.height) .attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`); return svg.node(); }32:[] 2f:{"title":"Tippy Tutorial","cells":[{"id":0,"value":"md`# Tippy Tutorial`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"tree = data => d3.tree()\n .size([2 * Math.PI, radius])\n .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)\n (d3.hierarchy(data))","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"width = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"radius = width / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"data = (await fetch(\"https://raw.githubusercontent.com\"\n + \"/aglerum/observables\"\n + \"/master/data\"\n + \"/usedit_tree_181023.json\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"definition =\n d => d.data.definition","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"// This works\ntippy('button', { content: \"I'm a tooltip, too!\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"// These work. Hint: Sometimes you have to refresh the browser and then reenter the block.\n//tippy('svg', { content: \"I'm a svg tooltip\" })\n//tippy('g', { content: \"I'm a g tooltip\" }) \n//tippy('circle', { content: \"I'm a circle tooltip\" }) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"// These works:\n//tippy('.btn')\n//tippy('circle')","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"// This worka:\ntippy('.btn', {\n content: \"I'm a customized tooltip!\",\n arrow: true,\n arrowType: 'round',\n size: 'large',\n duration: 500,\n animation: 'scale'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"tippy = require('https://unpkg.com/tippy.js@3/dist/tippy.all.min.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}