broken account, please ignore - migrating
hacklog.log("Hello, log World")
clickmap = {
resetS1;
const s1 = `digraph { node [shape = doublecircle]; 1;
node [shape = circle]
2;
0 -> 1 [penwidth=4]; 1 -> 2; 2 -> 0 [penwidth=3 color=green]}`;
yield displayDot(s1, {
scale: 1,
padding: 0.2,
cb: demoClickHandler // <- ADDED THIS
});
}
function demoClickHandler(msg, node) {
let nodeid = node.replace(/node/, ""); //.parseInt() - 1;
hacklog.log(`[demoClickHandler] ${nodeid} ${Date.now()}`); //
}
demoClickHandler("foo", "node21")
displayDot = async (dotStr, params) => {
{
const { scale = 1, w = "50%", padding = 0.25, interactive = true } =
params || {};
const svgStr = await dot2Svg(dotStr);
const viz = buildSvg({ svgStr, scale, w, padding });
const t = viz.transform.zoom;
const wrap = d3.create("svg");
wrap.attr("id", "wrapper");
wrap.attr("style", "border: 1px solid lightgray");
wrap.attr("width", viz.wrapper.width);
wrap.attr("height", viz.wrapper.height);
wrap.html(viz.html);
const zoomed = (e) =>
d3.select(`#${viz.id}`).attr("transform", e.transform);
const zoom = d3
.zoom()
.extent([
[0, 0],
[viz.wrapper.width, viz.wrapper.height]
])
.scaleExtent([t.scale * 0.9, 5])
.on("zoom", zoomed);
const hover = () => {
const nodes = wrap.selectAll(".node");
const edges = wrap.selectAll(".edge");
const shapes = "ellipse,polygon,rect";
const lines = "path";
let color = {};
const clicked = {};
const highlightN = "yellow";
const highlightE = "red";
const select = (that) => {
const s = d3.select(that);
const id = s.attr("id");
return { s, id };
};
nodes
.on("mouseover", function (e) {
const { s, id } = select(this);
if (!clicked[id]) color[id] = s.selectAll(shapes).attr("fill");
s.selectAll(shapes).attr("fill", highlightN);
})
.on("mouseout", function (e) {
const { s, id } = select(this);
if (!clicked[id]) s.selectAll(shapes).attr("fill", color[id]);
});
edges
.on("mouseover", function (e) {
const { s, id } = select(this);
if (!clicked[id]) color[id] = s.selectAll(lines).attr("stroke");
s.selectAll(lines).attr("stroke", highlightE).attr("stroke-width", 2);
})
.on("mouseout", function (e) {
const { s, id } = select(this);
if (!clicked[id])
s.selectAll(lines)
.attr("stroke-width", 1)
.attr("stroke", color[id]);
});
nodes.on("click", function (e) {
hacklog.log("CLICK."); //
const { s, id } = select(this);
let cb = params.cb;
cb("TEST"); // should work? doesn't.
if (typeof cb == "function") {
hacklog.log(
`Click! id=${id} s:${s} e:${e} return function is: ${params["cb"]}.`
);
cb(`[click cb called]=${id}`); // not happening, dunno why
}
hacklog.log(`Click! id=${id} s:${s} cb() is ${cb}.`); // *************************** EXPERIMENTING WITH CALLING BACK UPON NODE SELECTION
if (clicked[id]) {
s.selectAll(shapes).attr("fill", color[id]);
clicked[id] = false;
} else {
s.selectAll(shapes).attr("fill", highlightN);
clicked[id] = true;
}
});
edges.on("click", function (e) {
const { s, id } = select(this);
if (clicked[id]) {
s.selectAll(lines).attr("stroke-width", 1).attr("stroke", color[id]);
clicked[id] = false;
} else {
s.selectAll(lines).attr("stroke-width", 2).attr("stroke", highlightE);
clicked[id] = true;
}
});
};
wrap.call(zoom);
wrap.call(
zoom.transform,
d3.zoomIdentity.scale(t.scale).translate(t.translate.x, t.translate.y)
);
interactive && hover();
return wrap.node();
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
