Getting unexpected black background after applying style:"stroke: blue; stroke-width: 2px;"

Question

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!!

Answer 1

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",      
    }

Answer 2

您可以将所有箭头的填充设为无，它将解决它：

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