d3: Request code review/update pattern help

grosenberg · November 21, 2023, 1:23am

New D3 user.

Managed to cobble together a working library function for adding a force directed graph to a SVG element embedded in a Vue3/Vuetify component.

Relevant code is in

gist.github.com

https://gist.github.com/grosenberg/b1ce7720d3d5d89ccf201e49e246093b

libD3Adaptors.js


/**
 * Define a link arrow mark description on the SVG element. Allows
 * the mark to be applied to all elements having some assigned class.
 *
 * Use:
 *    d3.selectAll('.link').attr('marker-end', 'url(#end)');
 */
export function defineLinkMarks(svg) {
  const defs = svg.append('defs');

This file has been truncated. show original

libD3Force.js

import * as d3 from 'd3';
import { defineLinkMarks, defineGlowFilter } from './libD3Adaptors';
import { mapEdgeSets, defineBoxLinkPath } from './libD3Utils';
import { loadSampleData } from './libSampleData';

export function useD3Force(plan, height, width, elem) {
  const debug = true;

  let nodes = [];
  let edges = [];

This file has been truncated. show original

libD3Utils.js

import { getArrow, getBoxToBoxArrow } from 'perfect-arrows';

export function defineBoxLinkPath(src, tgt, idx, inverted, singleton) {
  const arrowInfo = getBoxToBoxArrow(src.x, src.y, src.width, src.height, tgt.x, tgt.y, tgt.width, tgt.height, {
    bow: idx * 0.25,
    padStart: 2,
    padEnd: 2,
    flip: inverted,
    straights: singleton,
  });

This file has been truncated. show original

There are more than three files. show original

The primary block is libD3Force.js

Two problems that I would like help with:

it looks like spaghetti! Maybe that is what it should/typically looks like. Confirmation or any suggestions of how to improve the code structure would be appreciated.
despite looking at the somewhat scant select.join documentation, I am unable to see how to apply it to my node select/pan/drag code (libD3Force.js:166):

    // Create a group draggable surface for nodes and links
    const node = g.selectAll('g').data(nodes).enter().append('g').attr('cursor', 'move');

    // Add node drag behavior.
    node.call(d3.drag().on('start', startDrag).on('drag', doDrag).on('end', stopDrag));

    node
      .append('rect')
      ....

Current process is to initially call updateSim then startSim.
To subsequently update, call updateSim then restartSim.
That d3.selectAll('g > *').remove(); in restartSim is a current workaround I wish to be able to remove.

Thanks

Topic		Replies	Views
d3 force copying instead of animating Community Help	1	313	October 27, 2020
How can I add data in chunks to a d3 force directed graph? D3	5	112	March 2, 2024
Fit Force Directed Graph in a viewpoint Community Help	4	452	August 10, 2021
graph force, complex nodes, avoiding overlapping New To Observable	1	108	March 27, 2024
Use Custom Icons in D3 Force Graph Community Help	7	198	September 11, 2023

d3: Request code review/update pattern help

Related Topics