I'm new to reactJS and I have been trying to create a graph in react using DagreGraph. I learnt minimum react required to understand how to create a graph. This is my code that is giving errors with the edge that is created between two nodes.

import DagreGraph from "dagre-d3-react";
import React from "react";
import ReactDOM from "react-dom";
// import d3 from "dagre-d3";
var nodes = [
  {
    id: "1",
    label: "<h3>Node 1</h3>",
    labelType: "html",
    config: {
      style: "fill: #bef3a6"
    }
  },
  {
    id: "2",
    label: "<h3>Node 2</h3>",
    labelType: "html",
    config: {
      style: "fill: #f3a6a6"
    }
  },
  {
    id: "3",
    label: "<h3>Node 3</h3>",
    labelType: "html",
    config: {
      style: "fill:#1111"
    }
  }
];
var links = [
  {
    source: "1",
    target: "2",   
    config:{
      style:"stroke: blue; stroke-width: 2px;", 
      lineInterpolate:'basis', 
      arrowheadStyle:"fill: blue",      
    }
  },  
  {
    source: "2",
    target: "3",   
    config:{
      style:"stroke: blue; stroke-width: 2px;", 
      lineInterpolate:'basis', 
      arrowheadStyle:"fill: blue", 
    }
  },
  {
    source: "1",
    target: "3",   
    config:{
      style:"stroke: blue; stroke-width: 2px;", 
      lineInterpolate:'basis', 
      arrowheadStyle:"fill: blue", 
      arrowhead:"vee",
      fill:"blue"
    }
  }
];
ReactDOM.render(
  <div>
    <DagreGraph
      nodes={nodes}
      links={links}
      options={{
        rankdir: "LR",
        align: "UL",
        ranker: "tight-tree"
      }}
      width="500"
      height="500"     
      animate={1000}
      fitBoundaries
      zoomable
      onNodeClick={(e) => console.log(e)}
      onRelationshipClick={(e) => console.log(e)}
    />
  </div>,
  document.getElementById("root")
);

This is my code to create 3 nodes using DagreGraph from "dagre-d3-react" in react. I'm not able to get the graph as expected. I'm getting black background for the arrows which should not be there as in here DagreGraph Could you please help me in finding out the error in my code?

Thanks in advance!!

CodePudding user response：

I think I found solution to my question. Gotta change the style attribute to this for every link

config:{
      style:"stroke: blue; stroke-width: 2px;fill:none", 
      lineInterpolate:'basis', 
      arrowheadStyle:"fill: blue",      
    }

CodePudding user response：

You can make the fill as none for all arrows and it will solve it:

      style: " fill:none;stroke:#200e32;stroke-width:2px;",