Public
Edited
Sep 27, 2023
chart = {
const width = 100;
const height = 100;
const svgContainer = d3.create("svg")
.attr("class","svgContainer")
.attr("width", width)
.attr("height", height);
const dot = svgContainer.append("g")
.attr("id","dot")
.attr("display", "none")
dot.append("circle")
.attr("r", 10)
.attr("fill","black")
dot.append("text")
.attr("text-anchor", "middle")
.attr("y", -8);
const node = svgContainer.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 10)
.style("fill", "grey");
svgContainer.on("contextmenu", showContextMenu);
function showContextMenu(event,data) {
event.preventDefault();
console.log("SHOW POPUP")
if(d3.select("#dot").attr("display") == "none"){
const menu = d3.select(".context-menu")
const [xm, ym] = d3.pointer(event);
console.log("Xm: ", xm)
console.log("Ym: ", ym)
console.log("THIS: ", this)
console.log("DOT: ", d3.select("#dot").attr("display"))
d3.select("#dot")
.attr("display","block")
.attr("transform",`translate(${xm + 20},${ym - 20})`)
}else{
d3.select("#dot")
.attr("display","none")
}
}
return svgContainer.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.
