我是reactJS的新手,我一直在尝试使用DagreGraph在react中创建一个图。我学习了如何创建图所需的最小react。这是我的代码,在两个节点之间创建的边出现错误。
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")
);
这是我在react中使用“dagre-d3-react”中的DagreGraph创建3个节点的代码。我无法获得预期的图形。我得到了黑色背景的箭头,这些箭头不应该出现在这里DagreGraph。您可以帮助我找出代码中的错误吗?
提前感谢!!
2条答案
按热度按时间neekobn81#
我想我找到了我的问题的解决方案。必须将每个链接的样式属性更改为这个
yeotifhr2#
您可以将所有箭头的填充设为无,它将解决此问题: