我试图建立一个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());
好了,想通了。用IDs定义链接的结构与对象不同。
"links": [
{
"source": 1,
"target": 2,
"value": 50
},
或
"links": [
{
"source": {
"id": "some_id"
...