3

I have created a network topography map using react-3d-graph and I am trying to access functions which are native to react-3d-graph outside of the graph itself. For example, I have a button which needs to utilize highlight behavior to highlight an individual node and its related nodes/links. Is there a way to do this? Here is the code for the graph:

const myConfig = {
  "automaticRearrangeAfterDropNode": false,
  "collapsible": true,
  "height": 700,
  "highlightDegree": 1,
  "highlightOpacity": 0.2,
  "linkHighlightBehavior": true,
  "maxZoom": 8,
  "minZoom": 0.1,
  "nodeHighlightBehavior": true,
  "panAndZoom": false,
  "staticGraph": false,
  "width": 1100,
  "d3": {
    "alphaTarget": 0.05,
    "gravity": -200,
    "linkLength": 300,
    "linkStrength": 1
  },
  "node": {
    "color": "#57a3ff",
    "fontColor": "black",
    "fontSize": 12,
    "fontWeight": "bold",
    "highlightColor": "red",
    "highlightFontSize": 12,
    "highlightFontWeight": "bold",
    "highlightStrokeColor": "SAME",
    "highlightStrokeWidth": 1.5,
    "labelProperty": "name",
    "mouseCursor": "pointer",
    "opacity": 1,
    "renderLabel": true,
    "size": 450,
    "strokeColor": "none",
    "strokeWidth": 1.5,
    "svg": "",
        "symbolType": "square"
  },
  "link": {
    "color": "#d3d3d3",
    "opacity": 1,
    "semanticStrokeWidth": false,
    "strokeWidth": 4,
    "highlightColor": "blue"
  }
};

And here is the Graph component.

  <Graph
        id="graph-id" 
        data={data}
        config={myConfig}
        onClickNode={this.props.toggle}
        onClickGraph={onClickGraph}
        onClickLink={onClickLink}
        />

The function I am trying to access is "nodeHighlightBehavior". Is there a way to do this?

CHays412
  • 145
  • 2
  • 15
  • nodeHighlightBehaviour in your code is not a function but a Boolean variable – Hemadri Dasari Oct 09 '18 at 14:33
  • Correct, but it indicates that the "nodeHighlightBehavior" function is to be used when nodes are rolled over and that is the function I am trying to call with an outside button. – CHays412 Oct 09 '18 at 14:36
  • Still desperately trying to figure this out. If anybody could help it would be much appreciated! – CHays412 Oct 15 '18 at 14:13
  • I am not getting your query if you can explain bit more I can help you – Hemadri Dasari Oct 15 '18 at 14:18
  • Thank you Think-Twice. There is a function within react-d3-graph referenced as "nodeHighlightBehavior" in the script I posted. It causes nodes and their associated links/nodes to highlight when an individual node in the graph is moused over. In my app I have a button outside of the graph component which, when clicked, needs to initiate that same behavior in the graph for an individual node. I have pored through all of the files in the node_modules folder and tried every type of d3.select but nothing is working. I simply want to be able to reference that function somehow with an outside button. – CHays412 Oct 16 '18 at 10:45

0 Answers0