node package manager

d3-creed

d3-creed

Force layout chart based on d3.js.

Install

$ npm install d3-creed

Usage

const creed = require('d3-creed')
 
// create chart 
var chart = creed({
    target: '#chart'
})
 
chart.render({
    nodes: [...],
    links: [...]
})

or in browser:

<script src="path/to/d3-creed.min.js"></script>
<script>
    var chart = creed({
        target: '#chart'
    });
    chart.render({
        nodes: [...],
        links: [...]
    });
</script> 

Examples

$ npm run example

then access http://localhost:9000/examples/.

Basic Example:

Customized Example:

API

creed(options)

Create a new force layout chart with given options.

chart.render(data)

Render the chart with given data.

chart.clear()

Clear the chart.

Customization

You could customize every step when rendering the chart.

  • customize force

    chart.force
      .charge(-100)
      .linkDistance(50)
  • customize links rendering

    chart._renderLinks = function() {
      // ... 
    }
  • customize nodes rendering

    chart._renderNodes = function() {
      // ... 
    }
  • customize links ticking

    chart._tickLinks = function() {
      // ... 
    }
  • customize nodes ticking

    chart._tickNodes = function() {
      // ... 
    }
  • customize events

    // these could be accessed before rendering 
    chart.svg
    chart.defs
    chart.glink
    chart.gnode
     
    // these could be accessed after rendering 
    chart.nodes
    chart.links

License

MIT