Nocturnal Pumpkin Maelstrom

    d3-graph-controller
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.17 • Public • Published

    d3-graph-controller

    Logo

    Documentation · Demo

    A TypeScript library for visualizing and simulating directed, interactive graphs.

    CI NPM Coverage LGTM Grade MIT npm bundle size

    Features

    • 👉 Fully interactive dragging, panning, zooming and more. Supports touch input and uses multi-touch.
    • 📱 Responsive graphs that fit any screen thanks to automatic or manual resizing.
    • 🔧 Extensive configuration enables customizable behavior and visuals.

    Installation

    # yarn
    $ yarn add d3-graph-controller
    
    # npm
    $ npm install d3-graph-controller

    Usage

    import {
      defineGraph,
      defineGraphConfig,
      defineLink,
      defineNodeWithDefaults,
      Graph,
      GraphController,
    } from 'd3-graph-controller'
    import 'd3-graph-controller/default.css'
    
    const a = defineNodeWithDefaults({
      type: 'node',
      id: 'a',
      label: {
        color: 'black',
        fontSize: '1rem',
        text: 'A',
      },
    })
    
    const b = defineNodeWithDefaults({
      type: 'node',
      id: 'b',
      label: {
        color: 'black',
        fontSize: '1rem',
        text: 'B',
      },
    })
    
    const link = defineLink({
      source: a,
      target: b,
      color: 'gray',
      label: false,
    })
    
    const graph = defineGraph({
      nodes: [a, b],
      links: [link],
    })
    
    // A reference to the native host element, e.g., an HTMLDivElement. This is framework agnostic.
    // You may use Angular's @ViewChild, Vue's $ref, plain JavaScript or something else entirely.
    const container = document.getElementById('graph') as HTMLDivElement
    
    const controller = new GraphController(container, graph, defineGraphConfig())
    
    // Integrate the controller into the lifecylce of your application
    controller.shutdown()

    Styling

    In addition to the default style, that is available by adding import 'd3-graph-controller/default.css' to your project, it is possible to configure font-size and color of graph elements. Both properties of nodes and links accept valid CSS expressions. This allows you to use dynamic colors with CSS variables:

    :root {
      --color-primary: 'red';
    }
    import { defineNodeWithDefaults } from 'd3-graph-controller'
    
    defineNodeWithDefaults({
      type: 'node',
      id: 'a',
      label: {
        color: 'black',
        fontSize: '2rem',
        text: 'A',
      },
      color: 'var(--color-primary)',
    })

    For customization of the default theme, the custom CSS property --color-node-stroke can be used.

    Development

    # install dependencies
    $ yarn install
    
    # build for production
    $ yarn build
    
    # build in watch mode
    $ yarn dev
    
    # lint project files
    $ yarn lint
    
    # serve docs
    $ yarn docs:dev

    License

    MIT - Copyright © Jan Müller

    Install

    npm i d3-graph-controller

    DownloadsWeekly Downloads

    526

    Version

    2.3.17

    License

    MIT

    Unpacked Size

    89.3 kB

    Total Files

    34

    Last publish

    Collaborators

    • yeger