graphic = {
const width = 500;
const height = 500;
// load the file
const text = await FileAttachment("Dummy Graph@2.svg").text();
const document = new DOMParser().parseFromString(text, "image/svg+xml");
const svg = d3.select(document.documentElement).remove();
const root = svg.selectAll("g").filter(function () {
return this.id.includes("Dummy");
})[0];
// Get all the node elements, these are groups <g> with <ellipse> children (exclude root dummy node)
const nodeG = svg.selectAll("g").filter(function () {
return (
!this.id.includes("Dummy") &&
d3.select(this).selectAll("ellipse").size() > 0
);
});
// Get all the edger elements, these are groups <g> without <ellipse> children (exclude root dummy node)
const edgeG = svg.selectAll("g").filter(function () {
return (
!this.id.includes("Dummy") &&
d3.select(this).selectAll("ellipse").size() == 0
);
});
console.log("Nodes:",nodeG);
console.log("Edges:",edgeG);
// Purge existing path-text
nodeG.selectAll("path").remove();
// Replace old path-text with a proper <text> node
nodeG.selectAll("ellipse").each(function () {
const g = d3.select(this); // Current <g> element
const gp = d3.select(this.parentNode);
const x = g.attr("cx");
const y = g.attr("cy");
gp.append("text")
.text(gp.attr("id"))
.attr("x", x)
.attr("y", y)
.attr("text-anchor", "middle") // Center the text horizontally
.attr("dominant-baseline", "middle") // Center the text vertically
.style("fill", "black"); // Set the text color to black
});
edgeG.selectAll("path").each(function () {
const g = d3.select(this); // Current <g> element
const gp = d3.select(this.parentNode);
const x = g.attr("cx");
const y = g.attr("cy");
g.attr("fill",function(){
// Look for a named edge from A-C
return (gp.attr("id")==="A-C")?"red":g.attr("fill")
})
});
nodeG.selectAll("ellipse").on("click", clicked);
// Add pan/zoom
svg.call(
d3
.zoom()
.extent([
[0, 0],
[width, height]
])
.scaleExtent([-17, 18])
.on("zoom", zoomed)
);
function clicked(event, d) {
if (event.defaultPrevented) return; // dragged
d3.select(this).transition().attr("rx", 76).attr("ry", 76);
}
function dragstarted() {
d3.select(this).raise();
}
function dragged(event, d) {
d3.select(this)
.attr("cx", (d.x = event.x))
.attr("cy", (d.y = event.y));
}
function dragended() {}
function zoomed({ transform }) {
d3.selectAll("g").attr("transform", transform);
}
return svg.node();
}
{
// SVG path string
const pathString =
"M2075.5 115C2075.5 114.172 2074.83 113.5 2074 113.5C2073.17 113.5 2072.5 114.172 2072.5 115H2075.5ZM2160.94 259.061C2161.53 259.646 2162.47 259.646 2163.06 259.061L2172.61 249.515C2173.19 248.929 2173.19 247.979 2172.61 247.393C2172.02 246.808 2171.07 246.808 2170.49 247.393L2162 255.879L2153.51 247.393C2152.93 246.808 2151.98 246.808 2151.39 247.393C2150.81 247.979 2150.81 248.929 2151.39 249.515L2160.94 259.061ZM2072.5 115V162.5H2075.5V115H2072.5ZM2098 188H2138V185H2098V188ZM2160.5 210.5V258H2163.5V210.5H2160.5ZM2138 188C2150.43 188 2160.5 198.074 2160.5 210.5H2163.5C2163.5 196.417 2152.08 185 2138 185V188ZM2072.5 162.5C2072.5 176.583 2083.92 188 2098 188V185C2085.57 185 2075.5 174.926 2075.5 162.5H2072.5Z";
// Create a dummy SVG element
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
// Set the path's `d` attribute to the path string
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", pathString);
svg.appendChild(path);
// Get the path's pathSegList
const pathSegList = path.pathSegList;
// Function to convert path segment to X/Y coordinates
function getCoordinatesFromSegment(segment) {
const x = segment.x || 0;
const y = segment.y || 0;
return { x, y };
}
// Array to store the 2D X/Y coordinates
const coordinates = [];
console.log("Seglist:",path.getPointAtLength(0));
console.log("Seglist:",path.getPointAtLength(path.getTotalLength()));
console.log(path.getTotalLength());
// // Iterate through each path segment and extract coordinates
// for (let i = 0; i < pathSegList.numberOfItems; i++) {
// const segment = pathSegList.getItem(i);
// const { x, y } = getCoordinatesFromSegment(segment);
// coordinates.push({ x, y });
// }
// Output the coordinates
//console.log(coordinates);
}
d3 = require("d3@6")
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.
