myChart={
const div = html`<div style='max-width: 900px; overflow-x: auto; padding: 0px; margin: 0px;'></div>`;
const svg = d3.select(div)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
//create dummy data
const dataset = {
nodes: [
{id: "A"},
{id: "B"},
{id: "C"},
{id: "D"},
{id: "E"},
{id: "F"},
{id: "G"}
],
links: [
{source: "A", target: "B"},
{source: "B", target: "C"},
{source: "C", target: "D"},
{source: "D", target: "E"},
{source: "E", target: "A"},
{source: "A", target: "E"},
{source: "E", target: "D"},
{source: "D", target: "C"},
{source: "C", target: "B"},
{source: "B", target: "A"},
{source: "E", target: "F"}
]
};
console.log("dataset is ...",dataset);
// Initialize the links
const link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(dataset.links)
.enter().append("line");
// Initialize the nodes
const node = svg.append("g")
.attr("class", "nodes")
.selectAll("rect")
.data(dataset.nodes)
.enter().append("rect")
.attr("width", 60)
.attr("height", 60)
.call(d3.drag() //sets the event listener for the specified typenames and returns the drag behavior.
.on("start", dragstarted) //start - after a new pointer becomes active (on mousedown or touchstart).
.on("drag", dragged) //drag - after an active pointer moves (on mousemove or touchmove).
.on("end", dragended) //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel).
);
// Text to nodes
const text = svg.append("g")
.attr("class", "text")
.selectAll("text")
.data(dataset.nodes)
.enter().append("text")
.text(d => d.id)
.attr("fill", "red")
.attr("font-size", "1.9em")
//Listen for tick events to render the nodes as they update in your Canvas or SVG.
simulation
.nodes(dataset.nodes)//sets the simulation’s nodes to the specified array of objects, initializing their positions and velocities, and then re-initializes any bound forces;
.on("tick", ticked);//use simulation.on to listen for tick events as the simulation runs.
// After this, Each node must be an object. The following properties are assigned by the simulation:
// index - the node’s zero-based index into nodes
// x - the node’s current x-position
// y - the node’s current y-position
// vx - the node’s current x-velocity
// vy - the node’s current y-velocity
simulation.force("link")
.links(dataset.links);//sets the array of links associated with this force, recomputes the distance and strength parameters for each link, and returns this force.
// After this, Each link is an object with the following properties:
// source - the link’s source node;
// target - the link’s target node;
// index - the zero-based index into links, assigned by this method
// This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated).
function ticked() {
link.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
node.attr("x", d => d.x)
.attr("y", d => d.y)
.attr("fill", "blue");
text.attr("x", d => d.x - 5) //position of the lower left point of the text
.attr("y", d => d.y + 5); //position of the lower left point of the text
}
//When the drag gesture starts, the targeted node is fixed to the pointer
//The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value.
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();//sets the current target alpha to the specified number in the range [0,1].
d.fy = d.y; //fx - the node’s fixed x-position. Original is null.
d.fx = d.x; //fy - the node’s fixed y-position. Original is null.
}
//When the drag gesture starts, the targeted node is fixed to the pointer
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
//the targeted node is released when the gesture ends
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
console.log("dataset after dragged is ...",dataset);
}
return div
}
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.
