https://github.com/mshafir/ember-cli-force-layout

An ember component for a D3 Force Layout Graph
https://github.com/mshafir/ember-cli-force-layout

Last synced: about 1 month ago
JSON representation

An ember component for a D3 Force Layout Graph

• Host: GitHub
• URL: https://github.com/mshafir/ember-cli-force-layout
• Owner: mshafir
• License: mit
• Created: 2015-04-30T04:35:01.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-10-07T02:46:27.000Z (over 9 years ago)
• Last Synced: 2024-12-08T17:42:24.333Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.74 MB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Ember-cli-d3-force-layout

An ember component for an interactive graph

## Usage

### Template

```

{{force-layout-graph

    charge={{!-- how much nodes repel/attract each other, default: -1000 --}}

    linkDistance={{!-- distance of links between nodes, default: 50 --}}

    gravity={{!-- tendency of nodes to move toward center, default: 0.1 --}}

    nodes={{!-- list of node objects (see below) --}}

    links={{!-- list of link objects (see below) --}}

    editable={{!-- whether the graph is in edit mode (allow creating new nodes and links) --}}

    addedNode={{!-- action fired when a new node gets added in edit mode --}}

    removedNode={{!-- action fired when a node is removed in edit mode --}}

    addedLink={{!-- action fired when a link is added in edit mode --}}

    removedLink={{!-- action fired when a link is removed in edit mode --}}

    selectedLink={{!-- action fired when a link is selected --}}

    selectedNode={{!-- action fired when a node is selected --}}

 }}

```

### Data

Nodes and Lists are specified as a lists (or ember array) of objects as follows:

```

this.set('nodes', [{ name: 'node1' }, { name: 'node2' }]);

this.set('links', [{ source: 'node1', target: 'node2', type: 'cool-link'}]);`

```

### Actions

The following is basic handling of node/link additions/removals

```

 // In your controller

 actions: {

   addedNode(node) {

     this.get('nodes'.pushObject(node);

   },

   addedLink(link) {

     this.get('links').pushObject(link);

   },

   removedNode(nodeIndex) {

     this.get('nodes').removeAt(nodeIndex);

   },

   removedLink(linkIndex) {

     this.get('links').removeAt(linkIndex);

   }

 }

```

## Collaborating

### Installation

* `git clone` this repository

* `npm install`

* `bower install`

### Running

* `ember server`

* Visit your app at http://localhost:4200.

### Running Tests

* `ember test`

* `ember test --server`

### Building

* `ember build`

For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).