如何根据函数查找图形节点?

问题描述 投票:0回答:1

我试图建立一个d3 sankey图,我有一个节点和链接的数组,但不是使用数组索引来定义链接。0->1, 0->2 等,我想使用命名的ID来定义链接。https:/github.comd3d3-sankey#sankey_nodeId。

我已经把链接名称都弄好了,但是,d3的渲染失败了,原因是 Uncaught Error: missing: welcome. 它不能通过以下方式找到链接 id

D3图文档中提到了指定一个 "自定义访问器 https:/github.comd3d3-sankey#sankey_nodeId。

但我不知道如何定义它或传递它。

我正在使用一些react代码来生成图形vis

https:/codesandbox.iosm9vy7mr5k8?from-embed=&file=srcMysteriousSankey.js。

    return (
        <g style={{ mixBlendMode: "multiply" }}>
            {nodes.map((node, i) => (
                <SankeyNode
                    {...node}
                    color={color(colorScale(i)).hex()}
                    key={node.name}
                />
            ))}
            {links.map((link, i) => (
                <SankeyLink
                    link={link}
                    key={'link-' + i}
                    color={color(colorScale(link.source.index)).hex()}
                />
            ))}
        </g>

鉴于每个节点确实有 id 定义了,我想知道如何告诉sankey渲染器通过ID而不是默认偏移来寻找链接节点的方式.好像这个在其他D3类型的图中也有使用,在这个力图中也有引用。https:/bl.ocks.orgmbostockf584aa36df54c451c94a9d0798caed35。

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter());

enter image description here

d3.js charts sankey-diagram
1个回答
0
投票

好了,想通了。用IDs定义链接的结构与对象不同。

    "links": [
        {
            "source": 1,
            "target": 2,
            "value": 50
        },

    "links": [
        {
            "source": {
                "id": "some_id"
...
© www.soinside.com 2019 - 2024. All rights reserved.