danielcaldas / react-d3-graph Goto Github PK

Hello!
Is there any possibility to add labels to links? I'd like to have structure like that:

links: [
    {source: x, target: y, relationship: "xxx"}
]

And I want to create something like I have in my neo4j browser:

If not label, at least I'd like to have different colors, like we can do with nodes, simply by adding "color: value" to the node object.

If there are no plans for features like that, maybe some tips how I can implement them?

It will be really useful to have an option for nodes in which you can group them by color, maybe in MyConfig where you can group them as a category and assign them each a color.

For example,

nodes:
[
    {
        "label": "CPU",
        "id": "244",
        "type": "hardware"
    },
    {
        "label": "Linux",
        "id": "245",
        "type": "software"
    },
...

so myConfig would look like this:

// The graph configuration
const myConfig = {

  groups: {
    hardware: {
      color: "#CC0000"
    },
    software: {
      color: "#363636"
    }
  },
  node: {
    color: "lightgreen",
    size: 120,
    highlightStrokeColor: "blue"
  },
  link: {
    highlightColor: "lightblue"
  }
};

Thank you so much for react-d3-graph. As of now i can see the graph is displayed in circular shape

Can we change this to compact tree shape like this?

When trying to change/set any attributes other than source and target the links do not change the other attributes. Following the issue to the source I think it came from the _buildLinkProps function in components/Graph/helper.js which doesn't have the entirety of attributes for links passed in.

Only particular attributes in _buildLinkProps are set by a shared config, for example var stroke = config.link.color; and var strokeWidth = config.link.strokeWidth;.

Below is my code for setting up all of my links.

links: [
              { source: 'a', target: 'b', stroke: '#449999', strokeWidth: 5},
              { source: 'b', target: 'c', stroke: '#440099' },
              { source: 'c', target: 'a', stroke: '#449900' },
      ],

Hello,

I really like this project module. Easier to implement with documentation.
I was wondering about the graph payload and its short comings.

const data = {
nodes: [{ id: 'Harry' , attributes: {name: 'Harry', age: 25}}, { id: 'Sally', attributes: {name: 'Sally', age: 20}}],
links: [{ source: 'Harry', target: 'Sally', attributes: { // additional info on the link}}]
};

Can something like the above sample payload be supported?. This would help provide context on the node when clicked, And additionally, on the link as well.

Instead of providing source and target during link onclick(); additionally providing the attributes property can help with the link's context.

Thanks.

as the comments shows:

* Handles d3 'drag' event.
     * {@link https://github.com/d3/d3-drag/blob/master/README.md#drag_subject|more about d3 drag}
     * @param  {Object} ev - if not undefined it will contain event data.
     * @param  {number} index - index of the node that is being dragged.
     * @param  {Array.<Object>} nodeList - array of d3 nodes. This list of nodes is provided by d3, each
     * node contains all information that was previously fed by rd3g.
     * @returns {undefined}

the first parameter is ev，in which case it will not be undefined and what it does mean in d3-drag，I can‘t find anything help in the doc。

PS：
when _onDragEnd fires，I need to save the node position，so I can use it next time when I need static positions。so how can I get the final position of the node？

thanks

i want to use my custom node in graph. is it possible ?

I need to be able to select a node and focus the view on it: the displayed part of the graph should be centered around that node. This link here has an example which illustrates what I want quite well.

In my case, I need to do this programatically, without any user interaction. I have been unable to find anything related to this in the project documentation, so I guess there's no way to do this so far.

I've trying to figure out how to do this myself, but I'm still unsure on how to approach this issue.

Is this feature planned for an upcoming release? If not, do you have any idea on how to achieve this? Any tip you could give me would be much appreciated. 🙂

Can you give some examples on how to show node or edges attributes as popup or tooltip in hover or click event? Thanks

first of all, i like this modules, its fulfilling my simple graph right now
but there is something i don't like it. all the nodes and lines is stacked each other
can the nodes have their coordinate, or simply put their coordinate on the data?

Edit: also will it better if each link have each strokeWidth?

the data i generate looks like this
{ id: 'Compiler', color: '#b41500', symbolType: 'square' },
{ id: 'Publications', color: '#b41500', symbolType: 'square' },
{ id: 'IBM AIX', color: '#b41500', symbolType: 'square' },
{ id: 'Wireless', color: '#b41500', symbolType: 'square' },
{ id: 'Local Area Network', color: '#b41500', symbolType: 'square' },
{ id: 'Intrusion Detection', color: '#b41500', symbolType: 'square' },
{ id: 'Network Services', color: '#b41500', symbolType: 'square' },
{ id: 'CISA', color: '#b41500', symbolType: 'square' },
{ id: 'Audit', color: '#b41500', symbolType: 'square' },
{ id: 'Leadership', color: '#b41500', symbolType: 'square' },
{ id: 'Hospital Administration', color: '#b41500', symbolType: 'square' },
{ id: 'Statistical Analysis', color: '#b41500', symbolType: 'square' },

My colors do change but symbol are not working

I have tried combing the documentation to look for this answer, so please forgive me if it was somewhere in there and I did not see it. I'm trying to specify the link length between nodes. I have a network graph that I am building and the link length is based off of how related/unrelated the topics are to each other by a distance value that I have in my data. Is specifying the length between nodes possible?
Thanks so much!

When I select(clicked) an specific node and try to drag away from the others another node moves.
In this screenshot I try to move node #253 but the one that moves is node #250 (weird)

now, the issue doesnt happen If I use 3 or nodes and links, only with a bunch of data.

At first, I thought it was my data but I have tried it with 2 different frameworks such as react-vis-force and react-graph-vis and so far they are working fine.

Here's my data

P.D. is it possible to group nodes and assign a different color to said groups?, thanks

Can we support SVG images in place of D3J shapes for Nodes.

Hi Daniel, I presume that this is an annoying and amateur question to ask (of which I am both, unfortunately), but I am trying to use your library and want to add a custom button for adding nodes. However, when I try to change the data (using setState nodes and links) that a Graph is receiving as props, I get an error:

This is the code I am trying:

Please delete if this is unrelated or you think not worth time. Thanks for your help.

Is it possible to specify the layout of the nodes in relation to each other?

Thanks,
JM

I was stuck with this error for a while, until I finally found out what was causing it. Details on the error and the current workaround are listed bellow, just in case it can be of use to someone else who's struggling with the same problem.

Problem description

By the time I got the error, my Graph component was looking like this:

<Graph
    id="network-graph"
    data={this.props.data}
    onClickNode={this.props.onNodeClick || this.onNodeClick}
    onClickLink={this.props.onEdgeClick || this.onEdgeClick} />

When I run the application for the first time, the graph would render perfectly on the screen. However, when I updated its data in my component state and the graph was to be rendered for a second time, I got the following error message:

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Object.isDeepEqual (utils.js:52)
    at Graph.componentWillReceiveProps (Graph.js:390)
    at callComponentWillReceiveProps (react-dom.development.js:11527)
    at updateClassInstance (react-dom.development.js:11719)
    at updateClassComponent (react-dom.development.js:13153)
    at beginWork (react-dom.development.js:13824)
    at performUnitOfWork (react-dom.development.js:15863)
    at workLoop (react-dom.development.js:15902)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at replayUnitOfWork (react-dom.development.js:15310)
    at renderRoot (react-dom.development.js:15962)
    at performWorkOnRoot (react-dom.development.js:16560)
    at performWork (react-dom.development.js:16482)
    at performSyncWork (react-dom.development.js:16454)
    at interactiveUpdates$1 (react-dom.development.js:16719)
    at interactiveUpdates (react-dom.development.js:2150)
    at dispatchInteractiveEvent (react-dom.development.js:4532)

Workaround

After hours trying to figure it out, I finally discovered that adding the config prop to the Graph component prevented the error from happening.

<Graph
    id="network-graph"
    data={this.props.data}
    config={{}}
    onClickNode={this.props.onNodeClick || this.onNodeClick}
    onClickLink={this.props.onEdgeClick || this.onEdgeClick} />

Since I wasn't overriding anything in the default config, I just hadn't considered adding it before. In order to solve this issue, I was forced to pass down an empty object in the config prop.

After doing so, the graph would always successfully render whenever there was a change in the data.

Steps to reproduce the issue:

This issue can be easily reproduced in the sandbox example bundled with this project.

1. In the Sandbox.jsx file, remove / comment the config property in the constant graphProps defined in the render method (currently, line 295).

const graphProps = {
    id: 'graph',
    data,
    //config: this.state.config,
    onClickNode: this.onClickNode,
    onClickLink: this.onClickLink,
    onMouseOverNode: this.onMouseOverNode,
    onMouseOutNode: this.onMouseOutNode,
    onMouseOverLink: this.onMouseOverLink,
    onMouseOutLink: this.onMouseOutLink
};

2. Open the updated sandbox example in a browser.

3. Click any of the buttons to dynamically add or remove a node (the + and - buttons above of the graph). This action will trigger the error immediatly.

Additional notes

The project README file mentions that only id and data are required, and that both config and any of the callback methods are entirely optional. This is true for the first time the graph is rendered, but right now it seems that the config object must be present to update the view later on.

The solution for this issue would be to initialize the config value in the component state to an empty object, which will be used by default in case no config prop has been passed down to the Graph component.

The componentWillReceiveProps handler seems to be a good place to start. If you'd like, @danielcaldas, I can take a closer look at this later and submit a pull request.

For the time being, users must explicitly set a config prop even if they're not overriding any of the default settings.

As far as I can tell labelProperty getter hasn't been implemented. Am I missing something? If not, would you like a PR to implement it?

I'm a big fan of your work on the react-d3-graph, and I'd love a little help! I'm pretty new to programming in general, so apologies for any dumb questions. I'm trying to make a graph that displays & animates several tree traversals (bfs, etc.).

The graph doesn't rerender when I expect it to do so.
For instance, when I change the react component's state to designate the next node (during traversal) to highlight, the state properly updates, but the d3 graph doesn't change. I can see that it's getting the correct data / config, but what's rendered is still the old info. Here's a quick gif of this also happening when I try to change the input that builds the nodes: https://gyazo.com/2a677fc3983ce2acfe59bf7816527cd2

Another example: When I click the Level Order button, it runs the levelOrder function, which does update state.highlightedNode. Even though the state is changed, the node 5 is still green. So I suppose my question is - what exactly makes the graph refresh? Is there a way I can trigger this manually? https://gyazo.com/d71e37e860da27934ca7fa162df8ccd7

Also, I'm trying to get the nodes to render in specific positions, but I keep getting an error thrown when I set staticGraph: true. Does that mean that the only way to hardcode node positions is by removing the ability to add/remove nodes?

Here's the repo: https://github.com/ravisraval/teaching/tree/master
And the file in question: https://github.com/ravisraval/teaching/blob/master/src/components/algorithms/TreeTraversals.jsx

Background: All nodes are identified by their id. In your SandBox example, a node's id is of type string. However, I'd like to use a unique number instead of string, since two nodes may have the same name, but it doesn't necessarily mean that they are the same. Currently, if I do use a number, this line causes mainNodeParticipates to be always false, because of the ===. As a result, no link gets highlighted when highlightDegree==1.

You should either replace === with == to allow integer ids, or you can add a property to nodes in the graph's config called identifierType (say). So that we can distinguish different id types and use a proper method to compare them. The latter seems to be cleaner.

I am looking a easy way to call a method which will filter on Nodes, Symbol or Links. Pass in the any of them and Graph get redrawn . I was able to delete the node and redraw the graph using following code:

onClickNode = (id) =>{
console.log(id);

    if (this.state.data.nodes && this.state.data.nodes.length) {

      var index=this.state.data.nodes.map(function(x){ return x.id; }).indexOf(id);

          this.state.data.nodes.splice(index,1);
        const links = this.state.data.links.filter(l => l.source !== id && l.target !== id);
        const newdata = { nodes: this.state.data.nodes , links };

        this.setState({ data: newdata });
    } else {
        alert('No more nodes to remove!');
    }

  };

I can do the same and remove nodes when new props are received and call some method, but is their a better way to do this?
componentWillReceiveProps(nextDdata) { }

I don't want to set the data to newdata something like above , which force the to redraw the graph example (this.setState({ data: newdata });)

I would prefer some cache the original graph data and only apply filter on original data and force to redraw the graph.

Hi，@danielcaldas Thanks for the great product，it really help a lot。

Beyond the feature provided，I need more precisely control of the zoom to the graph，now you can only control the zoom the mousewheel，but there is always demand for control by other user action，like click zoom out button。

so，do you have any plan to add this feature？

Required Node version is low. Any chance you could be more flexible?

Potentially: >=6.x or something

So I started off with the example in the README, and added a simple button that adds a node and link on click:

import React, { Component } from 'react'
import { Graph } from 'react-d3-graph'

const data = {
  nodes: [
    {id: 'Harry'},
    {id: 'Sally'},
    {id: 'Alice'}
  ],
  links: [
    {source: 'Harry', target: 'Sally'},
    {source: 'Harry', target: 'Alice'},
  ]
}

const myConfig = {
  highlightBehavior: true,
  node: {
    color: 'lightgreen',
    size: 120,
    highlightStrokeColor: 'blue'
  },
  link: {
    highlightColor: 'lightblue'
  }
}

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      data: data,
    }
  }

  addNode() {
    this.setState({
      data: {
        nodes: this.state.data.nodes.concat([ {id: 'New Node'} ]),
        links: this.state.data.links.concat([ { source: 'New Node', target: 'Harry' } ]),
      }
    })
  }

  render() {
    return (
      <div className="App">
        <Graph
          id="graph"
          data={this.state.data}
          config={myConfig}
        />
        <button
          onClick={this.addNode.bind(this)}
        >
          Add Node
        </button>
      </div>
    )
  }
}

export default App

But this does not add the node to the graph. It seems like even though the data state is definitely being updated, the nodes aren't being 'processed' by D3 (doesn't have all of the coordinates/D3 specific data added to them). Could maybe be an issue of when D3 is called with the data? Should probably be called whenever there is an update?

When I click on a link, is there a way to show links type?
Currently, onClickLink method shows me the target and source.
links: [ {source: 'Harry', target: 'Sally'}, {source: 'Harry', target: 'Alice'}, ]

I would like to show the id value
links: [ {source: 'Harry', target: 'Sally' , id: 'friends'}, {source: 'Harry', target: 'Alice' id:'family'}, ]

Hi Daniel,
Really enjoying your React library! I was just wondering, do you have a recommended way of adding a tooltip (using one of the available tooltip libraries) to a graph generated with your approach? Would be very helpful if you could point me to an example.
Thanks!
Simon

It would be nice to be able to set the stroke color per node, in a similar way to the fill color:

Current fill color code:

let fill = node.color || config.node.color;

Current storke color code:

let stroke = config.node.strokeColor;

I'd send you a PR to this but I'm not sure if you want to handle it differently

let stroke = node.strokeColor || config.node.strokeColor;

I have been reading the documentation, but I still don't really know how to use this function with d3 forces. Could someone give me a very simple example of how to implement graphForces? I know how to link the function to the graph, I just don't know what is the way I should implement things like gravity and alike.

@danielcaldas - I really like react-d3-graph. do you know if there is way I can display different node symbol based on some attribute value of passed node data.

e.g. I have node data [{ "id" : 1, "type" : "location", name : "London" }, {"id" : 1, "type": "person", "name": "Smith"}] . now I want to choose d3 symbolType based on attribute value of type

In documentation, you mentioned buildSvgSymbol method, but I am not sure how to use it with react component <Graph />

Is there anyway, the nodes can repeal each other so they won't overlay and labels could be read better ? I've done this on vis.js, they have as physics inside options.

See example here

Hi,

I'm looking into possibility of grouping nodes by some identifier. Something similar to the following example:

https://bl.ocks.org/Andrew-Reid/e689546e3449fd9f1fba1d19c30d6f6d
https://stackoverflow.com/questions/40941524/d3-force-layout-how-to-force-a-group-of-node-to-stay-in-a-given-area

I forked this project to try and play with this, but am experiencing some issues with running a "sanbox" on the localhost:

npm run dev

Then when I open a page in browser, it hangs for couple seconds and crashes with no errors in the console (or terminal). Seems like this happens when I re-build bundle.js. I'm not a front-end developer expert, so I'm not quite understand the build process yet...

Could anybody advise on how to properly develop on this library?

Thanks!

Saw your answer here #47 but didn't get it working. I basically want to define color on link level.

I have the symbol working which display on the graph. If I want to change it to my own ICONS, do you have any example code you can point to. My knowledge of d3 symbol is limited .

for example i have icon <i className="icon-user icons font-2xl d-block mt-4/>"

Position is always random

Hi,

I would like to have the graph not rearrange itself when i pragmatically add node and link to the state. What happens right now is when ever i add a new node - link pair, the graph jumps to rearrange. I would ideally like to preserve the graph x and y coordinates of existing node and elements and make the new node append itself.

New property : automaticRearrangeAfterNodeAdd.

Thank you.

I was wondering if there was a way to display the label (or name attribute) of an edge on the graph so that it would be easy to see what the relationship between two nodes is? Read through the documentation but wasn't able to find anything, apologies if i missed it.

Directional links are placed on top of each other where Link1 (from Node1 to Node2) is placed on top of Link2 (from Node2 to Node1). It would be nice with a bend so it is distinguishable on the interface

Here is available methods like:
onClickNode
onClickLink
onMouseOverNode
onMouseOutNode

but have not onMouseOverLink which very need.

react-d3-graph should declare d3 and react as peer dependencies. At the moment clients might be using different versions of d3 or react in their applications without being aware that this can be the cause of breaking behaviour due to versioning incompatibilities issues.

To consider that this deps are also needed for development, and since npm@v3 peerDeps are not installed automatically, so we should add them to dev as well OR as alternative we could install peerDeps in a postinstall script.

Related issue: #67

I've seen some examples of responsive d3 where we append some attributes to the svg. I believe there must be a way to make responsive react-d3-graph from scratch, I just don't know how.
What snippet of code would I need to make this graph responsive?

<Graph
                id="graph-id1"
                data={data}
                config={myConfig}
                onClickNode={this.onClickNode}
            />

As links have a direction it would be nice to be able to see that direction fx by an arrow

Hi,

How do I best make the graph occupy 100% width/height of its parent element?

Thanks

Hello,

I've been looking into documentation to find a link "distance" property, but seems like there is none.
In the graph.const.js there is a line:
FORCE_IDEAL_STRENGTH: -100, // TODO: Expose as configurable,
to indicate it was in plans at some point.

So, just wondering if link distance property will be exposed sometime in future?

Also, I tried to change that value by hand (as well as LINK_IDEAL_DISTANCE: 100, in Graph.jsx) and build using "npm build", but that didn't do the trick. Haven't looked deeper yet to figure out why that "hack" would not work yet....

Hi, is there any plan to make the project compatible with the latest react?

Hi, I'm getting errors when I try to run react-d3-graph.
d3-zoom and d3-drag give me errors of "can not read button property of null)

and recently I've got an error of:
"react-d3-graph :: Graph :: you have not provided enough data for react-d3-graph to render something. You need to provide at least one node"

Although there definitely is multiple in the initial payload.

Any ideas?

If I set static Graph, then all lines and nodes have zero at x,y,z propertys that makes picture squeeze.

subj

I want do this:
width: 100vw
height: 100vh

Hi Daniel,

Thanks for the awesome library, very impressive. I am having a little bit of difficulty understanding just how D3 is performing its computations. In initialising the graph force configuration you pass D3 'this.state.d3Nodes'. D3 would then perform the necessary, regularly ticked computations on the x and y coordinates of the nodes objects contained in this array. Then, in your render you use 'this.state.nodes' to build link and node components which you eventually render in the svg.

The strange thing, that seems to be the underpinning of how the D3-React coupling works, is that the x and y coordinates of the node objects in 'this.state.nodes' changes (perfect because it means the build graph function will be continually supplied nodes with changing x and y coordinates). BUT, how does this happen? You gave D3 'this.state.d3Nodes' to perform its computations on, not 'this.state.nodes'.

Again, thanks for all your work.