0

问候

我正在尝试使用d3+react创建一个类似技能/天赋树的图表，其中每个节点上都有一个图像，通过显示工具提示（带有技能的描述）对悬停做出反应，并显示一个像索引一样的数字（表示它的水平）。现在这是一个（相对）复杂的问题，但我的问题与我遇到这个问题的第一个地方有关，即在节点上显示图像。

到目前为止的代码：

...
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}/>

显示这个： 到目前为止我的图表

我发现的所有解决方案要么不使用 reactjs，要么不使用 d3，我无法转换它们。

有谁知道实现我的目标的方法？我应该使用什么或在哪里可以找到有关此的合法文档？我只能找到关于 js 实现的大量文档，但找不到 reactjs。

或者：我应该在哪里以及如何将节点的图像实现到我现有的代码中？

4

1 回答 1

0

这现在可以通过 node.viewGenerator 来完成，它指向一个自定义组件，该组件可以包含图像或您想要的任何东西。

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

前任。

 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.
于 2020-11-10T15:07:22.577 回答