0

Greetings

I am trying to create a skill/talent-tree like graph with d3+react where each node has an image on it, reacts to hover by displaying a tooltip ( with the description of the skill ), and has a number displayed like an index ( indicating it's level ). Now this is a ( relatively ) complex problem, but my question is related to the first place where I got stuck with this, which is displaying the image on the node.

The code so far:

...
import { Graph } from 'react-d3-graph';
...
const data = {
    nodes: [
        {id:"n1",size: 5, x:160, y:160, label:"1"}, 
        {id:"n2",size: 5, x:120, y:200, label:"2"}, 
        {id:"n3",size: 5, x:200, y:200, label:"3"}, 
        {id:"n4",size: 5, x:280, y:160, label:"4"}, 
        {id:"n5",size: 5, x:240, y:200, label:"5"}, 
        {id:"n6",size: 5, x:320, y:200, label:"6"},
        {id:"n7",size: 5, x:400, y:160, label:"7"},
        {id:"n8",size: 5, x:360, y:200, label:"8"},
        {id:"n9",size: 5, x:440, y:200, label:"9"}
    ],
    links: [
        {id:"e1",source:"n1",target:"n2"},
        {id:"e2",source:"n1",target:"n3"},
        {id:"e3",source:"n1",target:"n4"},
        {id:"e4",source:"n4",target:"n5"},
        {id:"e5",source:"n4",target:"n6"},
        {id:"e6",source:"n4",target:"n7"},
        {id:"e7",source:"n7",target:"n8"},
        {id:"e8",source:"n7",target:"n9"}
    ]
};

const myConfig = {
    nodeHighlightBehavior: true,
    node: {
        color: 'lightgreen',
        size: 120,
        highlightStrokeColor: 'blue'
    },
    link: {
        highlightColor: 'lightblue'
    }
};
...
public render() {
    return ( ...
...
<Graph
                id='graph-id'
                data={data}
                config={myConfig}
                onClickNode={onClickNode}/>

Which displays this: My graph so far

All the solutions for this that I have found are either not using reactjs or not using d3 and I couldn't convert them.

Does anyone know a way of achieving my goal? What should I be using or where can I find legit documentation about this? I could only find extensive docs about js implementations, but not reactjs.

Or alternatively: where and how should I implement the images for the nodes into my existing code?

Anil_M
  • 10,893
  • 6
  • 47
  • 74
rayaqin
  • 187
  • 2
  • 14
  • It looks like using images for nodes is still an open [feature request](https://github.com/danielcaldas/react-d3-graph/issues/36) on the github repo... – SteveR Feb 28 '18 at 15:13
  • Is using react a definite requirement? I personally would just build it vanilla D3 and then you can control is at you want - rather than being dependent on some other library to implement a feature? – Ian Feb 28 '18 at 20:28
  • Ian, I am not in charge of the project so I can't make the decision to just not use react, but thanks for the input. ||| SteveR, it seems like they suggest some kind of additional custom rendering there, that I don't fully understand, and thats why I thought I should ask about it here, maybe someone can explain how to do it without having to wait for the d3 guys to implement it. – rayaqin Mar 01 '18 at 08:45
  • Yes, if this was plain D3, it would not be hard to add rendering for anything at each node -- but since all of that code appears to by *inside* the 3rd-part react library, they would have to either implement it in the library or give you a hook to call your own rendering. Either way, it's a question best asked directly to the authors of the library. – SteveR Mar 01 '18 at 14:18
  • I see. Thank you for the answer, I really appreciate you taking the time to appropriately explain this to me. Can you perhaps suggest a way that could work with react ( not d3 maybe )? – rayaqin Mar 01 '18 at 17:34

1 Answers1

0

This can now be done via node.viewGenerator which points at a custom component which can contain images or anything you want.

see: https://danielcaldas.github.io/react-d3-graph/docs/index.html#node

ex.

 const  data: GraphData<any, any> = {
        nodes: [],
        links: []
    }
 function generatePersonNode() {
        return <Person />;
    }
 data.nodes.push({ viewGenerator: generatePersonNode });

Where data as a graph prop and Person is a Component.
TanCtIo
  • 11
  • 5