Silverfox, I've tested both variants and they both work. This is your widget with my changes:
/*\ title: $:/plugins/tiddlywiki/d3/CirclePackWidget.js D3.js version: V5 plugin type: application/javascript module-type: widget A widget for displaying Zoomable Circle Packing. Derived from https://bl.ocks.org/mbostock/7607535 \*/ (function(){ /*jslint node: true, browser: true */ /*global $tw: false */ "use strict"; var Widget = require("$:/core/modules/widgets/widget.js").widget, d3 = require("$:/plugins/tiddlywiki/d3/d3.js"); var CirclePackWidget = function(parseTreeNode,options) { this.initialise(parseTreeNode,options); }; /* Inherit from the base widget class */ CirclePackWidget.prototype = new Widget(); /* Render this widget into the DOM */ CirclePackWidget.prototype.render = function(parent,nextSibling) { var self = this; //added by BurningTreeC // Save the parent dom node this.parentDomNode = parent; // Compute our attributes this.computeAttributes(); // Execute our logic this.execute(); // Create the chart var chart = this.createChart(parent,nextSibling); this.updateChart = chart.updateChart; if(this.updateChart) { this.updateChart(); } // Insert the chart into the DOM and render any children parent.insertBefore(chart.domNode,nextSibling); this.domNodes.push(chart.domNode); }; CirclePackWidget.prototype.createChart = function(parent,nextSibling) { var self = this; //added by BurningTreeC // Get the data we're plotting var root = this.wiki.getTiddlerData(this.myDataTiddler); // Create SVG element var margin = {top: 20, right: 10, bottom: 20, left: 10}, width = 800 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; var svg = d3.select(parent).insert("svg",function() {return nextSibling;}) .attr("viewBox", "0 0 800 800") .attr("preserveAspectRatio", "xMinYMin meet") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); var diameter = +svg.attr("width"), g = svg.append("g").attr("transform", "translate(2,2)"), format = d3.format(",d"); var pack = d3.pack() .size([diameter - 4, diameter - 4]); var monAction =""; root = d3.hierarchy(root) .sum(function(d) { return d.size; }) .sort(function(a, b) { return b.value - a.value; }); var node = g.selectAll(".node") .data(pack(root).descendants()) .enter().append("g") // .attr("class", function(d) { return d.children ? "node" : "leaf node"; }) .attr("fill", function(d) { return d.children ? "steelblue" : "#FFEBCC"; }) .attr("fill-opacity", function(d) { return d.children ? ".3" : "1"; }) .attr("stroke", "rgb(31, 119, 180)") .attr("stroke-width", "1px") .attr("stroke-opacity", ".5") .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) // .on("dblclick",function(d){ alert( "<$action-navigate $to='" +d.data.name +"'/>"); }); .on("dblclick",function(d){ monAction = "<$action-navigate $to='" +d.data.name +"'/>"; self.dispatchEvent({type: "tm-navigate", navigateTo: d.data.name}); //added by BurningTreeC }); //was missing node.append("title") .text(function(d) { return d.data.name + "\n" + format(d.value); }) node.append("circle") .attr("r", function(d) { return d.r; }); node.filter(function(d) { return !d.children; }).append("text") .attr("dy", "0.3em") .text(function(d) { return d.data.name.substring(0, d.r / 3); }) .attr("font", "arial") .attr("font-size","9px") .attr("fill","black") .attr("text-anchor","middle") ; // Return the svg node return { domNode: svg._groups[0][0], }; }; /* Compute the internal state of the widget */ CirclePackWidget.prototype.execute = function() { // Get the parameters from the attributes this.myDataTiddler = this.getAttribute("data"); }; /* Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering */ CirclePackWidget.prototype.refresh = function(changedTiddlers) { var changedAttributes = this.computeAttributes(); if(changedAttributes.data || changedTiddlers[this.myDataTiddler]) { this.refreshSelf(); return true; } return false; }; exports.d3circlepackclick = CirclePackWidget; })(); -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/fbc99d43-8203-4d32-9e02-ed801a8e8ac2%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
